位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 列表標記的位置list-style-position

提問人:劉團圓發(fā)布時間:2020-11-18

    之前所看見的列表標記的位置都是默認的,也就是顯示在元素之外的。其實列表標記圖案的位置是可以更換的,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>

image.png

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(0)
返回頂部
付费复制

付费获取七天复制权限

限时特价:2.88元/篇原价:10元
联系客服

扫码关注公众号,发送私信联系客服.

微信扫码关注,联系客服

联系客服QQ:2845411722

恭喜您,操作成功,可以复制了

3秒后关闭
X