我們在編寫網(wǎng)頁時經(jīng)常使用有序或無序列表來呈現(xiàn)信息。這時我們使用了HTML中的li標(biāo)簽，但是有時候我們希望li標(biāo)簽內(nèi)的內(nèi)容不要換行，而是在同一行展示。那么該如何實現(xiàn)呢？

<ul>
<li>蘋果</li><li>桔子</li><li>香蕉</li>
</ul>

以上代碼會呈現(xiàn)出類似以下的有序列表：

• 蘋果
• 桔子
• 香蕉

我們可以加入CSS樣式，對li標(biāo)簽進(jìn)行控制。我們可以設(shè)置li標(biāo)簽的display屬性值為inline，這樣就不會再自動換行了。

ul li {
display: inline;
}

使用樣式表后，以上代碼將會呈現(xiàn)出如下樣式：

• 蘋果
• 桔子
• 香蕉

可以看到，li標(biāo)簽內(nèi)的內(nèi)容都在同一行呈現(xiàn)了。我們還可以使用float屬性來控制，方法是設(shè)置float: left。這樣可以把每個li標(biāo)簽都浮動到左邊，達(dá)到同一行排列的效果。

ul li {
float: left;
}

以上代碼將會呈現(xiàn)出如下樣式：

• 蘋果
• 桔子
• 香蕉

通過設(shè)置li標(biāo)簽的display屬性值或float屬性，我們就可以實現(xiàn)不換行的li標(biāo)簽樣式。