在CSS中,可以使用display: inline
或display: inline-block
屬性來(lái)使列表項(xiàng)(li)不換行顯示出來(lái)。
display: inline
將列表項(xiàng)設(shè)置為內(nèi)聯(lián)元素,使其與其他元素在同一行內(nèi)顯示。
display: inline-block
將列表項(xiàng)設(shè)置為內(nèi)聯(lián)塊元素,使其既可以在同一行內(nèi)顯示,又可以有塊級(jí)元素的特性,如設(shè)置寬度和高度。
示例代碼如下:
<ul> <li style="display: inline;">列表項(xiàng)1</li> <li style="display: inline;">列表項(xiàng)2</li> <li style="display: inline;">列表項(xiàng)3</li> </ul>
或者:
<ul> <li style="display: inline-block;">列表項(xiàng)1</li> <li style="display: inline-block;">列表項(xiàng)2</li> <li style="display: inline-block;">列表項(xiàng)3</li> </ul>
這樣,列表項(xiàng)就會(huì)不換行顯示出來(lái),注意,這種方法只適用于水平布局,如果列表項(xiàng)內(nèi)容過(guò)多,可能會(huì)導(dǎo)致水平滾動(dòng)條出現(xiàn),如果需要更復(fù)雜的布局,可能需要結(jié)合其他CSS屬性或布局方式來(lái)實(shí)現(xiàn)。