CSS的樣式是非常重要的，對于網頁設計、排版等有著決定性的作用，而其中一個比較常見的樣式即是縱向變成橫向的設計，今天我們就來學習一下如何實現縱向變成橫向的效果。

/* 原始的豎直布局 */
ul {
display: block;
width: 100%;
}
li {
display: block;
width: 100%;
}
/* 加入橫向布局 */
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
display: inline-flex;
width: calc(50% - 15px);
margin-bottom: 30px;
}

以上就是實現豎直布局變為橫向布局的代碼，主要通過CSS3的flex布局來實現，其中flex-wrap屬性用來確定是否強制換行，justify-content屬性用來設置對齊方式，而li元素的寬度則可以通過calc函數來計算，并設定相應的間距。

在實際項目中，我們可以根據需要加入一些其他的CSS樣式來優化效果，例如加入hover效果、設置響應式布局等等。總之，CSS的樣式是十分靈活的，只需要我們熟悉它的使用方法，便能讓網頁的設計更加美觀。