CSS中的ul li橫排是指將無序列表中的li元素排成一行顯示,常用于導(dǎo)航欄等場(chǎng)景。下面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法:
ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; margin-right: 20px; }
首先,我們將ul的默認(rèn)樣式去除,然后將li的display屬性設(shè)為inline-block,這樣它們就可以在一行內(nèi)排列。接著,我們可以添加margin或padding屬性來調(diào)整它們之間的間距。
需要注意的是,在li中使用float屬性也可以實(shí)現(xiàn)橫排,但它會(huì)導(dǎo)致父元素高度塌陷的問題。
可以通過設(shè)置ul的font-size屬性來調(diào)整li的大小,以及使用text-transform屬性來將文本轉(zhuǎn)換為大寫或小寫。
ul { font-size: 16px; text-transform: uppercase; }
另外,為了使導(dǎo)航欄等橫排元素具有交互性,通常會(huì)添加一些:hover和:active等偽類來改變它們的樣式。
li:hover { background-color: #ccc; color: #fff; }
以上是實(shí)現(xiàn)CSS中ul li橫排的常用方法和注意事項(xiàng),希望能夠?qū)Υ蠹矣兴鶐椭?/p>