CSS布局是提高網頁美觀和可讀性的重要手段之一。在網頁中，列表是常用的元素之一，而將列表橫向排列能夠節約空間，讓網站內容更加緊湊。下面我們來學習如何使用CSS實現列表橫向排列。

ul {
display: flex; /* 將ul元素的 display 屬性設置為 flex */
list-style: none; /* 隱藏列表的默認樣式 */
padding: 0;
margin: 0;
}
li {
margin-right: 20px; /* 設置每個li元素右側的間距 */
}
/* 如果需要每個li元素寬度相同，可以設置如下樣式 */
li {
flex: 1; /* 設置每個li元素的伸縮比例為1 */
}

上面的代碼中，我們將ul元素的 display 屬性設置為 flex，這樣子元素li會自動橫向排列。接著，設置了列表的默認樣式和內外邊距。li元素內右側的margin可以根據實際需要調整。

如果需要每個li元素寬度相同，可以將每個li元素的伸縮比例都設置為1，這樣它們的寬度就會相同。如果想要某個li元素寬度更大，可以將其伸縮比例設置為2或更大。

上述代碼可以通過簡單的CSS樣式實現列表橫向排列。通過靈活運用這些樣式，可以讓網頁內容更加緊湊、清晰，提高網頁的可讀性和用戶體驗。