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

1. 使用CSS的自動高度
2. 利用CSS的Flex布局
3. 使用CSS的Grid布局
4. 利用百分比或視窗單位設(shè)置高度

CSS技巧：實現(xiàn)列表項（li）高度自適應(yīng)

在網(wǎng)頁設(shè)計中，我們經(jīng)常使用列表（ul或ol）來展示內(nèi)容，我們希望列表項（li）的高度能夠自適應(yīng)內(nèi)容，而不是固定不變，下面是一些關(guān)于如何使用CSS來實現(xiàn)這一目標的建議。

使用CSS的自動高度

對于li元素，我們可以設(shè)置其高度屬性為自動（auto），這樣瀏覽器會自動根據(jù)內(nèi)容的高度來調(diào)整li的高度。

ul li {
    height: auto;
}

利用CSS的Flex布局

Flex布局是一種靈活的布局方式，可以輕松實現(xiàn)元素的高度自適應(yīng)，我們可以將ul設(shè)置為Flex布局，然后讓li元素自動適應(yīng)其內(nèi)容的高度。

ul {
    display: flex;
    flex-direction: column;
}
ul li {
    /* li的高度會自動適應(yīng)內(nèi)容 */
}

使用CSS的Grid布局

Grid布局也是一種可以實現(xiàn)元素高度自適應(yīng)的CSS布局方式，我們可以將ul設(shè)置為Grid布局，然后讓li元素在網(wǎng)格中自動適應(yīng)高度。

ul {
    display: grid;
    grid-auto-rows: auto; /* 讓行高自動適應(yīng)內(nèi)容 */
}

利用百分比或視窗單位設(shè)置高度

我們還可以使用百分比或視窗單位（vw）來設(shè)置li的高度，使其能夠根據(jù)父元素或視窗的大小自動調(diào)整。

ul li {
    height: 50%; /* 高度為父元素高度的50% */
    /* 或者 */
    height: 5vw; /* 高度為視窗寬度的5% */
}

就是幾種實現(xiàn)li高度自適應(yīng)的方法，可以根據(jù)具體需求和場景選擇適合的方式，在實際應(yīng)用中，可能還需要結(jié)合其他CSS屬性和技巧來實現(xiàn)更復(fù)雜的布局效果。