列表標志位置

網頁建設中還可以做一件事來影響列表項的外觀，即確定標志出現在列表項內容之外還是在內容內部。這是利用list-style-position完成的。

如果標志的位置設置為outside（默認值），則顯示與一般Web上列表項的顯示無二。不過，在網頁設計時，如果你需要一個稍微不同的外觀，可以把這個值設置為inside，將標志拉向內容，這會使標志放在列表項的內容“以內”。對于具體如何做沒有明確定義，不過下面顯示了一種可能的做法：

li.first {list-style-position: inside;}

li.second {list-style-position: outside;}

list-style-position

值：inside | outside | inherit

初始值：outside

應用于：display 值為list-item 的元素

繼承性：有

計算值：根據指定確定

簡寫列表樣式

為簡單起見，可以將以上3個列表樣式屬性合并為一個方便的屬性：list-style。

list-style

值：[||||] inherit

初始值：相對于各個屬性。

應用于：display 值為list-item 的元素

繼承性：有

計算值：見單個屬性

例如：

li (list-style: url(ohio.gif) square inside;}

list-style的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其他的就會填入其默認值。例如，以下兩個規則有同樣的視覺效果：

li.norm {list-style: url(img42.gif);}

li.odd {list-style: urr(img42.gif) disc outside;}/* the same thing */

還可以用同樣的方法覆蓋之前的規則。例如：

li {list-style-type: square;}

li.norm {list-style: url(img42.gif);)

li.odd {list-style: urr(img42.gif) disc outside;}/* the same thing */

其結果與圖上面所示相同，因為規則li.norm隱含的list-style-type值disc會覆蓋先前聲明的square值，同樣地，li.odd規則中顯式聲明的值disc也會覆蓋先前聲明的square值。

列表布局

前面已經了解了應用列表標志樣式的基本知識，下面來考慮不同瀏覽器中列表如何布局。

從列表項周圍的邊框可以看出，它們就像是塊級元素。實際上，值list-item確實定義為生成塊框。

標志和列表項內容之間的距離在網頁建設中未定義，CSS2.1也沒有提供任何方法來控制這個距離。有意思的是，CSS2倒是提到過，這個內容將在“列表標志定位”中簡單介紹。

如果標志放在列表項內容之外，它們不會影響其他元素的布局，也不會影響列表項本身的布局。它們只是離內容邊界有一段距離，只要內容邊界移動，標志也會跟著軫動。標志的行為就像是標志相對于列表項內容絕對定位一樣，比如說position: absolute; left:如果標志在列表項內容內部，則相當于放在內容開始處的一個行內元素。

迄今為止，還沒有增加具體的列表容器，換句話說，沒有ul也沒有ol元素。

類似于列表項，列表元素也是一個塊框，其中包含所有后代元素。不過，可以看到，標志不僅放在列表項內容之外，也放在列表元素的內容區外。在此并沒有指定列表通常有的“縮進”。

在寫作本書時，大多數瀏覽器會通過設置列表元素的內邊距或外邊距來完成列表項的縮進。例如，用戶代理可能應用以下規則：

ul, ol {margin-left: 40px;}

這是Internet Explorer和Opera采用的規則，大多數基于Gecko的瀏覽器則使用類似下面的規則：

ul, ol {padding-left: 40px;}

不能說這兩種做法不正確，但是如果你想消除列表項的縮進，二者的差異會導致一些問題。

注意：這里40px的距離是從較早的Web瀏覽器繼承來的，早先的瀏覽器會把列表縮進一定的像素數。更好的值可能是2.5em，因為這樣一來，縮進就可以隨文本大小的變化而調整。

如果創作人員在網頁設計時想改變列表的縮進距離，強烈建議你同時指定內邊距和外邊距，以確保跨瀏覽器兼容性。

如果想用外邊距，可以寫作：

ul {margin-left: 1em; padding-left: 0;}

不論哪一種情況，要記住標志總會相對于列表項的內容放置，因此可能會“掛”在文檔主文本之外，甚至超出瀏覽器容器邊界。

列表標志定位

許多創作人員都希望有這樣一個特性，能夠控制標志與列表項內容之間的間隔。CSS2定義了一些辦法來做到這一點，這包括一個名為marker-off set的屬性和一個display值marker，從具體的實現來看，這是一個很笨拙的辦法，所以這些特性已經從CSS2.1中去除了。

寫作本書時，CSS3列表模型的當前工作革案定又了一個更聞潔的新方法來影響標志位里，即：：marker偽元素。飯設這個模塊在成為完備推薦之前沒有改動，有朝一日你可能可以編寫類似li::marker {margin-right: 0.125em;}的規則，使標志與列表項內容之間有適當的距離，而不用把標志放在內容內部。

新聞名稱：網頁設計中的列表設計
當前網址：http://www.js-pz168.com/news1/159451.html

成都網站建設公司_創新互聯，為您提供動態網站、網站維護、定制開發、網頁設計公司、企業網站制作、網站策劃

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯