如果你想讓你的網(wǎng)頁中的一組元素橫向排列，那么就需要用到 CSS 的 li 橫向排列屬性了。li 橫向排列可以用于導航菜單、圖片展示等等場景。

先看一下 HTML 代碼：

<ul>
<li>首頁</li>
<li>新聞</li>
<li>產(chǎn)品</li>
<li>關于我們</li>
</ul>

接下來，我們需要用 CSS 來控制 li 橫向排列的樣式。常用的方式是使用 display: inline-block; 屬性。

<style>
ul {
list-style-type: none; /* 去除列表標記 */
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
</style>

在這個例子中，我們先將 ul 元素的列表標記去除，然后使用 margin 和 padding 屬性將列表的默認邊距和填充設置為 0。接著，我們將 li 元素的 display 屬性設置為 inline-block，這可以讓 li 元素橫向排列，并且同時保留塊級元素的特性。我們還使用 margin 屬性來控制 li 元素之間的間距。

至此，我們就實現(xiàn)了 li 橫向排列的簡單效果。當然，在實際應用中，我們還可以使用更多的 CSS 樣式來美化這些元素。如調(diào)整字體大小、顏色、添加背景色等等。

總之，掌握 li 橫向排列是很有用的技巧，它可以讓你的網(wǎng)站更加美觀、易用、易讀。而且只要你熟練掌握了這個技術，你就能更加輕松地應對各種實際情況。