<div> 边框折叠不完全折叠 [重复]

Question

我有一个由 angular ng-repeat 创建的相邻 div 的小部件。

看起来像这样（除了 forst 和 last 之外的垂直边框看起来是 2px，这表明边框折叠没有折叠：

我希望它看起来像这样，除了第一个框有左边框。 （css指定无左边框）

。

当然，我可以在第一个框上设置border-style: solid 以获得左边框，但我正在使用 AngularJs 以编程方式创建这些小部件，这意味着我必须正确的逻辑才能在第一个小部件上使用不同的 css其他 7. 但是，如果崩溃按预期工作，我似乎应该能够在所有 div 上使用相同的 css 获得我需要的东西。

这是我使用的当前 CSS 以及我在有关该主题的各种帖子中看到的所有小技巧，以避免双垂直边框。

.container {
    display: flex;
    flex-direction: row;
    margin-left: 5px;
}
.item  {
   display: table-cell;
   border: 1px solid gray;
   border-spacing: 0px;
   border-left-style: none;
   background-color:  #fffff7;
   border-collapse: collapse;
   box-sizing: border-box;
}

Answer 1

border-collapse 对表格单元格样式的元素没有任何作用，它与display:table 一起使用。

您的代码看起来是这样的，因为您将1px 宽边框应用于每个元素，导致它们彼此相邻堆叠并变成2px。

因为你没有提供 HTML，所以我创建了一些简单的东西，但这应该让你知道如果你想使用 flex-box，你可以如何处理边框。

.container {
  display: flex;
  flex-direction: row;
  margin-left: 5px;
}
.container > div {
  display: table-cell;
  border: 1px solid gray;
  border-left: 0;
  border-spacing: 0px;
  background-color:  #fffff7;
  padding: 5px;
  font-size: 20px;
}

.container > div:first-child{
  border-left: 1px solid gray;
}
  

<div class="container">
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
  <div>O</div>
</div>

附：您可能应该为此使用 grid 而不是 flexbox