在很多項目中,需要實現分格展示的功能,中間有灰色分割線,兩側沒有。
如圖:
按照一般的思路,設置好li的寬度,通過nth-of-type(n){}的方式給li標籤添加樣式。
但是中間1px的邊框不太好實現。
如何設置每個li 33.33%的寬度,由使其添加1px邊框呢?
我們可以通過給父級 ul 添加:before :after 僞類元素來實現。
下邊是代碼
當顯示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的寬度。
.mp-list:after {
content: '';
position: absolute;
width: 10%;
left: 75%;
height: 100%;
border-left: .02rem solid #ddd;
border-right: 0;
}