在这里插入代码片
CSS:
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
ul {
display: flex;
width: 300px;
height: 60px;
align-items: center; //配套div 实现垂直居中
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
li {
flex: 1;
border-left: 1px solid #D9D9D9; ** //设置左边线
height: 36px;
font-size: 12px;
line-height: 14px;
text-align: center; //文字居中
}
li:first-child {
border: none;
//利用伪类清除 第一个li 的左边距 或者可以设置右边线 然后设置:last-child border:none
}
.num {
color: #333333;
margin-bottom: 6px;
}
.text {
color: #868686;
}
</style>
HTML:
<ul>
<li class="au">
<div>//此处的div不是无意义 而是实现分栏的的垂直居中
<div class="num">524</div>
<div class="text">关注</div>
</div>
</li>
<li class="au">
<div>
<div class="num">18705761</div>
<div class="text">粉丝</div>
</div>
</li>
<li>
<div>
<div class="num">1650</div>
<div class="text">微博</div>
</div>
</li>
</ul>
总结:
三栏平均分布思路:
1.父元素 align-items: center; //配套div 实现垂直居中
2.子元素 flex: 1;
三栏两线的思路:
border-left: 1px solid #D9D9D9; ** //设置左边线
然后利用:first-child border:0
或者border-right: 1px solid #D9D9D9; ** //设置右边线
然后利用:last-child border:0