CSS list-style-position

CSS list-style-position 用來設定 ul liol li 項目的呈現位置,每個項目前面有一個項目標籤,例如 ul 的每一個 li 標籤前預設有「●」標示,而 ol 的每個 li 標籤前會有數字排序,CSS list-style-position 所設定每個項目的呈現位置就是以項目符號為參考位置,通常會用到 indise 或 outside 這兩種參數,inside 可以看成項目符號在 li 範圍內,outside 可以看成項目符號在 li 範圍外,看範例比較清楚。

CSS list-style-position 範例
<style type="text/css">
ul.InsideTest {
    list-style-position:inside;
}
ul.OutsideTest {
    list-style-position:outside;
}
li {
    border:1px #cccccc solid;
}
</style>
<ul class="InsideTest">
 <li>Test list style position inside.</li>
 <li>Test list style position inside.</li>
</ul>
<ul class="OutsideTest">
 <li>Test list style position outside.</li>
 <li>Test list style position outside.</li>
</ul>
以上範例輸出結果如
為了能夠清楚的呈現位置的關係,我們在每個 li 項目都加上一個灰色的邊框(border:1px #cccccc solid),如此一來就可以清楚的看到 ul 預設的項目符號「●」的所在位置,若要隱藏項目符號或修改為其他符號,請參閱:CSS list-style-type

CSS list-style-position 可以用的參數表
參數定義
inside
項目符號在 <li></li> 標籤範圍之內。
outside
項目符號在 <li></li> 標籤範圍之外,預設值。
inherit
繼承自父層的規則

參數表中最後一個 inherit 不建議使用,因為 IE 瀏覽器目前尚未支援這個屬性,未來還不知道會不會支援,所有的主流瀏覽器都支援 inside 與 outside 這兩個參數,另外,若要使用 outside 的效果,其實可以不用額外寫,因為 outside 是 list-style-position 的預設值。無論是 ul li 還是 ol li 都可以使用 list-style-position 的屬性,差別僅在於項目符號的不同,位置的呈現是完全一樣的結果。

相關主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C