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

CSS 列表標(biāo)記的位置list-style-position

提問(wèn)人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-18

    之前所看見的列表標(biāo)記的位置都是默認(rèn)的,也就是顯示在元素之外的。其實(shí)列表標(biāo)記圖案的位置是可以更換的,CSS中的list-style-position屬性就提供了這個(gè)功能。 list-style-position屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記。

    該屬性用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置。外部(outside)標(biāo)志會(huì)放在離列表項(xiàng)邊框邊界一定距離處,不過(guò)這距離在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)記對(duì)齊。

    ?outside:默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外,環(huán)繞文本且不根據(jù)標(biāo)記對(duì)齊。

    ?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>

image.png

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

相關(guān)視頻回答
回復(fù)(0)
返回頂部