CSS的list-style-position屬性是用來指定列表項標記（li元素）與列表文本（放在li元素中間的文本內容）之間的位置關係。
一、基本使用
默認情況下，CSS list-style-position屬性取值為outside，表示標記放在列表項文本前面。
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul>
ul {
list-style-position: outside;
}
上述代碼的效果為：
- 列表項1
- 列表項2
- 列表項3
二、inside取值
如果我們將CSS list-style-position屬性的取值改為inside，則標記將會出現在列表項文本的內部。
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul>
ul {
list-style-position: inside;
}
上述代碼的效果為：
- 列表項1
- 列表項2
- 列表項3
三、列表項標記的自定義樣式
CSS list-style-type屬性可以用來指定標記的類型。
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul>
ul {
list-style-position: inside;
list-style-type: square;
}
上述代碼的效果為：
- 列表項1
- 列表項2
- 列表項3
四、總結
CSS list-style-position屬性的取值可以是outside或inside，用來指定標記的位置。默認情況下，取值為outside；而CSS list-style-type屬性則可以用來指定標記的類型，比如square、circle等等。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/237456.html
微信掃一掃 
支付寶掃一掃 