在很多項目中，需要實現分格展示的功能，中間有灰色分割線，兩側沒有。
如圖：
按照一般的思路，設置好li的寬度，通過nth-of-type(n){}的方式給li標簽添加樣式。
設置每個li 33.33%的寬度，但當我們添加1px邊框時，最右邊的內容就被擠了下來。
這時可以通過給父級 ul 添加:before :after 偽類元素來實現。而不占用li的width
當顯示3列時，通過給ul 添加:before來實現
CSS
<style> ul li{ list-style: none;} .mp-list{ position: relative; overflow: hidden; z-index: 0; background-color: #fff; } .mp-list:before { content: ''; position: absolute; width: 33.33%; left: 33.33%; height: 100%; border-left: .02rem solid #ddd; border-right: .02rem solid #ddd; } .mp-list li { width: 33.33%; height: 2rem; line-height: 2rem; font-size: .28rem; text-align: center; border-bottom: .02rem solid #ddd; margin-bottom: -1px; float: left; position: relative; z-index: 10; color: #212121; } .mp-list li a { color: #212121; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .28rem; } </style>HTML
<ul class="mp-list"> <li><a hybrid-link="" href="" title="">香港</a></li> <li><a hybrid-link="" href="" title="">澳門</a></li> <li><a hybrid-link="" href="" title="">臺灣</a></li> <li><a hybrid-link="" href="" title="">曼谷</a></li> <li><a hybrid-link="" href="" title="">新加坡</a></li> <li><a hybrid-link="" href="" title="">首爾</a></li> <li><a hybrid-link="" href="" title="">東京</a></li> <li><a hybrid-link="" href="" title="">濟州島</a></li> <li><a hybrid-link="" href="" title="">芭堤雅</a></li></ul>
當顯示4列時，給:after添加樣式，注意需要更改li的width、.mp-list:before的位置。
.mp-list:after { content: ''; position: absolute; width: 10%; left: 75%; height: 100%; border-left: .02rem solid #ddd; border-right: 0;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
