CSS 列表標(biāo)記的位置list-style-position
之前所看見的列表標(biāo)記的位置都是默認(rèn)的，也就是顯示在元素之外的。其實(shí)列表標(biāo)記圖案的位置是可以更換的，CSS中的list-style-position屬性就提供了這個(gè)功能。 list-style-position屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記。
該屬性用于聲明列表標(biāo)志相對于列表項(xiàng)內(nèi)容的位置。外部（outside)標(biāo)志會放在離列表項(xiàng)邊框邊界一定距離處，不過這距離在CSS中未定義。內(nèi)部（inside)標(biāo)志處理為好像它們是插入在列表項(xiàng)內(nèi)容最前面的行內(nèi)元素一樣。
list-style-position的值可以是以下幾種：
?inside：列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，環(huán)繞文本且根據(jù)標(biāo)記對齊。
?outside：默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外，環(huán)繞文本且不根據(jù)標(biāo)記對齊。
?inherit：規(guī)定應(yīng)該從父元素繼承l(wèi)ist-style-position屬性的值。
【例題】使用list-style-position屬性
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.ul{
list-style-position:inside;
}
</style>
</head>
<body>
<p>默認(rèn)的列表標(biāo)記</p>
<ul >
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
</ul>
<hr/>
<p>使用list-style-position屬性的列表標(biāo)記</p>
<ul>
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
</ul>
</body>
</html>
湘公網(wǎng)安備:43011102000856號 
點(diǎn)擊加載更多評論>>