css九宫格边框合并

Question

<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);
}

Answer 1

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

可以把相邻的边框合并

table{
  border-collapse:collapse;
}

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

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

Answer 2

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

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

Answer 3

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