html - 如何使边框不与另一个边框重叠，多选或单选？

Question

我有这个示例代码:

<div class="container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
</div>

.container {
  display: flex;
  .square {
    display: inline-flex;
    width: 30px;
    justify-content: center;
    border: 1px solid black;
  }
}

一个问题是，如果我添加边框，它会与下一个边框重叠。

而且我知道如果我想解决这个问题，我可以只使用 SASS 并定位所有 div 但不是第一个和最后一个，这个问题就会得到解决。但是这个解决方案产生了一个新问题:如果我只选择数字 2 的 div 而不是多个元素，则 div 2 现在将不会有他的所有边框。

如何解决第一个问题而不引发第二个问题？我不认为这是重复的，因为我遇到了由修复引起的问题。

如果有帮助，我正在使用 React atm。

Answer 1

这个常见问题有多种解决方案。

另一种方法是将除第一个元素之外的每个元素向左移动 1px (border-width)

假设您的选择改变了边框的颜色。您可以在选择元素时更改 z-index。同样的技术也可用于您解释的缺少边界的问题。为了形象化这一点，我添加了悬停样式。

.container {
  display: flex;
}

.square {
  display: inline-flex;
  width: 30px;
  justify-content: center;
  border: 1px solid black;
}

.square:not(:first-child) {
  margin-left: -1px;
}

.square:hover {
  border-color: red;
  z-index: 1;
}

<div class="container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
</div>