CSS 列表換行縮進(jìn)是指在列表項(xiàng)較長(zhǎng)時(shí),將列表項(xiàng)按需縮進(jìn),并在換行后對(duì)齊,以提高可讀性。
實(shí)現(xiàn)方法很簡(jiǎn)單,只需在 CSS 樣式表中對(duì)列表元素添加以下代碼即可:
ul { list-style: none; padding: 0; } li { margin-left: 1.5em; text-indent: -1.5em; }以上代碼中,我們首先將 ul 的 padding 設(shè)為 0,以去除默認(rèn)的縮進(jìn)和邊距。然后,通過 li 的 margin-left 和 text-indent 屬性來控制列表項(xiàng)的縮進(jìn)和對(duì)齊。 其中 margin-left 表示左邊距,我們?cè)O(shè)置為 1.5em,即 1.5 倍的字體大小。text-indent 表示首行縮進(jìn),我們將其設(shè)為 -1.5em,即負(fù)的左邊距大小,以便讓每一行都與第一行對(duì)齊。 這樣做之后,我們就可以得到一個(gè)很不錯(cuò)的列表效果了:
- This is a long text that should be wrapped and indented in the list item.
- This is another long text that should be wrapped and indented in the list item.
- This is a short text.