0
<ul>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
</ul>

sCss
ul{
width: 1200px;
display:flex;
 box-sizing: border-box;

li{
 width: calc(100% / 6);
 border: 1px solid red;
}
}

以上代码出现的边框会导致中间的一些边框为2px;

于是给li加了

 margin: 0 0 -1px -1px;

但是加了这个代码字后又导致每一行右边空出6px;

有什么好的办法吗?

我自己解决的一个办法 是不太友好

&:nth-child(6n) {
   width: calc(100% /6 + 6px);
}
李冰 143
2018-12-06 提问
3 个回答
0

已采纳

想做到边框合并的效果,用表格最简单了

可以把相邻的边框合并

table{
  border-collapse:collapse;
}

其他方式可以采用拼接的方式,

比如里面的每个方块只设置左边框和上边框,然后最外层设置右边框和下边框..

0

你可以把中间的去除左边框或者右边框。如:

li:not(:last-child){
  border-right: 0;
}
0

使用表格比较简单,原生写比较繁琐

撰写答案

你可能感兴趣的

推广链接