CSS列表可以幫助我們呈現信息，但是有時候垂直的列表可能不適合我們的排版需求。在這種情況下，我們可以通過CSS將列表轉換為橫排列。

ul {
display: flex; /* 將ul元素設為flex容器 */
flex-direction: row; /* 設置元素組成的方向為水平方向 */
list-style: none; /* 去掉列表的樣式 */
padding: 0; /* 去掉列表默認的內邊距 */
}
li {
margin-right: 20px; /* 設置每個元素之間的間距 */
}

以上代碼是將ul元素設置為flex容器，讓其中的子元素（即li元素）在水平方向排列。兩個關鍵屬性是display: flex和flex-direction: row。這將使我們的列表元素橫向排列，不再是默認的垂直列表。

接下來，我們使用list-style: none去掉默認的樣式，然后使用padding: 0清除默認的內邊距。最后，margin-right: 20px會在每個元素之間添加一個20像素的間距。

轉換列表為水平方向的另一種方法是使用display: inline-block屬性。但是，如果使用該屬性，則需要在HTML中輸入更多的標記以確保元素橫向排列。

第一項
第二項
第三項
第四項

以上是使用Flexbox將垂直列表轉換為水平列表的示例。您可以通過修改CSS屬性的值來自定義同樣的設置以適合您的需求。