CSS 列表標記的位置list-style-position
之前所看見的列表標記的位置都是默認的,也就是顯示在元素之外的。其實列表標記圖案的位置是可以更換的,CSS中的list-style-position屬性就提供了這個功能。 list-style-position屬性設(shè)置在何處放置列表項標記。
該屬性用于聲明列表標志相對于列表項內(nèi)容的位置。外部(outside)標志會放在離列表項邊框邊界一定距離處,不過這距離在CSS中未定義。內(nèi)部(inside)標志處理為好像它們是插入在列表項內(nèi)容最前面的行內(nèi)元素一樣。
list-style-position的值可以是以下幾種:
?inside:列表項目標記放置在文本以內(nèi),環(huán)繞文本且根據(jù)標記對齊。
?outside:默認值。保持標記位于文本的左側(cè)。列表項目標記放置在文本以外,環(huán)繞文本且不根據(jù)標記對齊。
?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>默認的列表標記</p>
<ul >
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
</ul>
<hr/>
<p>使用list-style-position屬性的列表標記</p>
<ul>
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
</ul>
</body>
</html>
點擊加載更多評論>>