卡卡網(wǎng)

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

項目列舉 li 換行文字左邊不對齊

其實，默認情況下，li 換行文字左邊是對齊，如下圖所示：

li 換行文字左邊對齊

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

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

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

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

demo

知識擴展：list-style-position

list-style-position 規(guī)定列表中列表項目標記的位置：

ul
{
  list-style-position:inside;
}

定義和用法

list-style-position 屬性設置在何處放置列表項標記。

說明

該屬性用于聲明列表標志相對于列表項內(nèi)容的位置。外部 (outside) 標志會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內(nèi)部 (inside) 標志處理為好像它們是插入在列表項內(nèi)容最前面的行內(nèi)元素一樣。

可能的值

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

JavaScript 語法：

object.style.listStylePosition="inside"

標簽: css  li