在網頁樣式設計中，CSS樣式是非常重要的一部分。其中，水平布局與垂直布局是最常見的兩種布局方式。有時候我們需要將垂直布局轉化為水平布局，這時候 CSS 樣式將非常有用。
在 CSS 樣式中，有一個屬性叫做 display，它可以改變元素的顯示方式。我們可以利用該屬性，將一個垂直的元素轉化為水平的元素。如下所示：

p {
display: inline;
}

上述代碼意味著將 p 元素的顯示方式從默認的塊級（block）樣式變為行內（inline）樣式。這一行內樣式可以讓元素自動適應其內容的高度，從而變成水平樣式。
除了行內樣式，我們還可以利用 display 和其它 CSS 屬性，讓元素實現不同的水平布局。比如，在下面的代碼中，我們將一個垂直布局的列表轉化為水平布局的導航欄：

ul {
display: flex;
flex-direction: row;
justify-content: space-between;
list-style-type: none;
}
li {
margin: 0 10px;
padding: 5px 10px;
background-color: #fff;
border: 1px solid #999;
}

上述代碼使用了 flexbox 布局，一個現代的布局模型。我們將 ul 元素的 display 屬性設置為 flex，這樣子 ul 里面的所有 li 元素都會按照 flexbox 的規則進行排列。其中，flex-direction 屬性指定了排列方向，而 justify-content 則決定了排列的位置。利用這些屬性，我們可以非常簡單地將一個垂直布局的列表轉化為水平布局的導航欄。
總結一下，CSS 樣式是前端開發中非常重要的一環。通過設置 display 屬性，我們可以輕松實現垂直布局到水平布局的轉化。理解和掌握這些 CSS 樣式，將大大提高我們的前端開發效率。