CSS是前端開發中必須掌握的一項技能，它可以使我們的頁面更加美觀，豐富多彩。其中，豎向不重復是一種常見的效果，本文將詳細介紹如何實現這種效果。

ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 10px;
margin: 0 5px;
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 16px;
line-height: 26px;
text-align: center;
vertical-align: middle;
height: 28px;
}
li:before {
content:'';
display:none;
height:100%;
vertical-align:middle;
}
li:after {
content:'';
display:table;
clear:both;
}

這段代碼中，我們首先將ul的樣式重置，然后設置了li的樣式。其中，我們使用了display:inline-block來讓li元素水平排列，實現豎向效果的核心代碼在li:before和li:after中。

li:before的作用是在li元素前插入一個空元素，用于讓li元素垂直居中。我們使用了vertical-align:middle屬性來實現垂直居中，而height:100%則是為了讓空元素與li元素一樣高。

li:after的作用是清除浮動，避免li元素之間產生影響，同時也是為了兼容不支持:before的IE瀏覽器。

在使用此代碼時，我們只需要將ul元素中的li替換為我們需要的元素即可。

綜上所述，本文介紹了如何使用CSS實現豎向不重復的效果。通過掌握此方法，我們可以更好地控制網站的樣式，提升用戶體驗。