卡卡網(wǎng)

項(xiàng)目列舉 li 是常用的網(wǎng)頁內(nèi)容布局排版標(biāo)簽，其樣式也非常豐富，單單是列表項(xiàng)標(biāo)記的類型（list-style-type），我們就有20多個選擇。今天談的問題是，項(xiàng)目列舉 li 換行文字左邊不對齊的問題，如下圖所示：

項(xiàng)目列舉 li 換行文字左邊不對齊

其實(shí)，默認(rèn)情況下，li 換行文字左邊是對齊，如下圖所示：

li 換行文字左邊對齊

li 換行文字左邊對齊會讓項(xiàng)目列舉更加清晰。

是什么原因?qū)е?li 換行文字左邊不對齊呢？

其實(shí)，是由于設(shè)置 li 的 list-style-position 屬性所致。一般情況下， list-style-position 屬性是不用設(shè)置的，其屬性值是 inside 和 outside 。

經(jīng)過測試發(fā)現(xiàn)，當(dāng)設(shè)置 list-style-position: inside; 時，li 換行文字左邊不對齊；當(dāng)設(shè)置 list-style-position: outside; 時，li 換行文字左邊是對齊的。

demo

知識擴(kuò)展：list-style-position

list-style-position 規(guī)定列表中列表項(xiàng)目標(biāo)記的位置：

ul
{
  list-style-position:inside;
}

定義和用法

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)元素一樣。

可能的值

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

JavaScript 語法：

object.style.listStylePosition="inside"

標(biāo)簽: css  li