多个相邻的li标签，去除重叠

Question

多个li组成的按钮，设置 border：border: 1px solid #000，结果在页面中，相邻的li边框会重叠在一起，在百度找了很多答案都说是要设置 margin-left； -1px，但是尝试之后结果仍然没有得到解决，li 数量不同，第偶数个或者奇数个li的border-right还是会重叠， 下面是代码。我主要想通过margin来实现，因为如果是 border-right: none， 设置点击后边框颜色改变， 那么点击之后边框颜色会缺失

render() {
        return (
            <div>
                <ul>
                    <li/>
                    <li/>
                    <li/>
                    <li/>
                    <li/>
                    <li/>
                </ul>
             </div>
        )
 }
            

ul{
  display: flex;
  flex-direction: row;
  justify-content: center;
  li {
    display: flex;
    flex-direction: row;
    width: 90px;
    height: 100px;
    border: 1px solid #000;
    margin-right: -1px;
  }
}

求助各位大神，万分感谢

Answer 1

假设他们是由上至下排列的
那么他们都只有下边框没有上边框
然后给第一个设置上边框