案例效果
该布局最重要的部分就是三条竖线
大家应该很想知道为啥第二行最后面还有条竖线，对吧
没错，这就是它和其他表格不一样的地方
让我们一起来探索它吧
首先大家请看源码
<template>
<div class="List">
<div class="List-title">A</div>
<ul class="list-msg">
<li class="list-item">苏克拉地区</li>
<li class="list-item">苏克拉地区</li>
<li class="list-item">苏克拉地区</li>
<li class="list-item">苏克拉地区</li>
<li class="list-item">阿坝藏族羌族自治州</li>
<li class="list-item">苏克拉地区</li>
</ul>
<div class="List-title">B</div>
<ul class="list-msg">
<li class="list-item">苏克拉地区</li>
<li class="list-item">苏克拉地区</li>
<li class="list-item">苏克拉地区</li>
<li class="list-item">苏克拉地区</li>
<li class="list-item">阿坝藏族羌族自治州</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style scoped lang="stylus">
@import '~css/common.styl'
.List-title{
font-size:.24rem;
color: #212121;
padding: .2rem .3rem;
}
.list-msg{
position: relative;
background: #fff;
overflow: hidden;
}
.list-msg:before{
content: " ";
position: absolute;
left: 25%;
width :25%;
height:100%;
border-right: .02rem solid #ddd;
border-left: .02rem solid #ddd;
}
.list-msg:after{
content: " ";
position: absolute;
left: 0%;
width :75%;
height:100%;
border-right: .02rem solid #ddd;
}
.list-item{
width:25%;
font-size:.28rem;
text-align: center;
line-height: .9rem;
float: left;
border-bottom: .02rem solid #ddd;
textOverflow();
}
</style>
源码看过之后想必小哥哥们已经知道这三条线的来源了
不过漂亮的小姐姐一定还不知道
下面让我来为小姐姐们讲一讲其中的奥秘
首先第三条竖线 下方并没有出现任何文字就有了竖线 所以由此推出这一定不是 li 所为
所以把焦点 放到ul身上 发现 ：before ：after 两个里面 总共有三条线 用了定位来将竖线定了位
想必小姐姐也已经了解其中的奥秘了！ 嘿嘿！
欢迎大家 关注我哦~
一个可爱帅气迷人的小宝
