本文目錄導(dǎo)讀：

1. 使用默認(rèn)樣式
2. 使用CSS重置樣式
3. 使用CSS屬性調(diào)整布局

CSS實(shí)現(xiàn)列表項(xiàng)豎直排列的方法

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要處理列表項(xiàng)（li）的排列方式，其中豎直排列是***常見的一種方式，下面介紹如何通過CSS實(shí)現(xiàn)列表項(xiàng)的豎直排列。

使用默認(rèn)樣式

默認(rèn)情況下，HTML中的列表項(xiàng)（li）就是豎直排列的，在CSS中，我們不需要進(jìn)行特別的設(shè)置，只需要保證HTML結(jié)構(gòu)正確即可。

<ul>
  <li>列表項(xiàng)一</li>
  <li>列表項(xiàng)二</li>
  <li>列表項(xiàng)三</li>
</ul>

使用CSS重置樣式

在某些情況下，我們可能需要重置瀏覽器的默認(rèn)樣式，以確保列表項(xiàng)的豎直排列不受影響，可以通過CSS的初始化樣式來實(shí)現(xiàn)。

ul {
  list-style-type: none; /* 移除列表前的標(biāo)記 */
  padding: 0; /* 移除上下左右的內(nèi)邊距 */
  margin: 0; /* 移除外邊距 */
}

使用CSS屬性調(diào)整布局

在某些特殊情況下，我們可能需要通過CSS屬性來調(diào)整列表項(xiàng)的布局，可以使用display屬性來設(shè)置列表項(xiàng)的顯示方式，當(dāng)設(shè)置為塊級元素時(shí)，列表項(xiàng)會豎直排列：

li {
  display: block; /* 將列表項(xiàng)設(shè)置為塊級元素 */
}

實(shí)現(xiàn)列表項(xiàng)的豎直排列并不復(fù)雜，只需要保證HTML結(jié)構(gòu)正確，并使用適當(dāng)?shù)腃SS樣式即可，在實(shí)際開發(fā)中，我們可以根據(jù)具體需求選擇不同的方法來實(shí)現(xiàn)列表項(xiàng)的豎直排列。