嵌套的div：如何获得重叠的边框？

Question

以下图片显示了所需的结果： 下面是我使用“position: relative”到达的位置：

<div class="tags-container">
    <div class="tag">Pizza</div>
    <div class="tag">Spaghetti</div>
    <div class="tag">Mandolino</div>
    <div class="tag">Pizza</div>
    <div class="tag">Spaghetti</div>
    <div class="tag">Mandolino</div>
    <div style="clear: both"></div>
</div>

.tags-container {   
    border: 1px solid #ff0000;
    width: 300px;
}
.tag {
    float: left;
    position: relative;
    top: -1px;
    left: -1px;
    padding: 5px;
    border: 1px solid #ff0000;
}

http://www.lucagiorcelli.it/test/testing-borders.html

- Kurt UXD

---

也许你可以看看这个？https://dev59.com/c2Mm5IYBdhLWcg3wDbmo - Ermir

感谢您添加代码！ - Kurt UXD

@KurtUXD 刚刚更新了答案以适应您的需求。 - Hashem Qolami

Answer 1

您可以将顶部/左侧的 border 重置为 0，并使用负值的 margin-top 属性来实现结果。

实际上，没有必要重置边框。

虽然相对 定位 会保留空间以防止更改布局，但是 margin 会使元素实际移动。

因此，您可以向 .tag 元素添加负的顶部/左侧 margin。但是，最后一行元素的底部会有一个额外的边框。

为了将边框向上移动，您可以在 .tags-container 中添加一个虚拟子元素，并对该元素使用负的底部 margin。

由于您在 .tags-container 结尾使用了一个 <div> 元素来清除浮动，因此您也可以将所需的负边距应用到该元素上。

<div class="tags-container">
  <div class="tag">Pizza</div>
  <div class="tag">Spaghetti</div>
  <!-- other .tag elements... -->
  <div style="clear: both"></div> <!-- Apply negative margin to this element -->
</div>

.tag {
  float: left;
  margin-top: -1px;
  margin-left: -1px;
  padding: 5px;
  border: 1px solid #ff0000;
}

.tags-container div:last-child {
  margin-bottom: -1px; /* This negative margin overlaps the bottom border */
}

工作演示。

---

或者，您可以使用::after伪元素作为.tags-container的最后一个子元素来清除浮动并应用负边距：

.tags-container:after {
  content: "";
  display: block;
  clear: both;
  margin-bottom: -1px;
}

更新演示.

- Hashem Qolami

---

我向你的老板致敬！ - Paulie_D

唯一不起作用的情况是当一行比前一行更长时... http://jsfiddle.net/mendesjuan/ZpwxH/ 如果您省略底部边框，那么您可以解决这种情况并破坏原始内容 :) - Ruan Mendes

如果您将容器的宽度设置为100，它不会产生预期的结果。 - Gab

是的，有一些限制，如果我能找到更好的方法，我会更新答案。 - Hashem Qolami

@HashemQolami 看起来对我来说没问题了，移动的边框重叠了。非常好！我认为你的第二个选择器更准确，应该是.tags-container .tag:last-child。 - Ruan Mendes

@HashemQolami 这是一个有解决性的（优雅的）方法。 - Kurt UXD

Answer 2

这里有一个使用一些技巧的替代方法。

在这里查看演示

<style>
  .tags-container {     
    border-top: 1px solid #ff0000;
    border-right: 1px solid #ff0000;
    border-left: 1px solid #ff0000;
    width: 100%;
    box-sizing:border-box;
  }
  .tag {
    float: left;
    top: -1px;
    left: -1px;
    padding: 5px;
    border: 1px solid #ff0000;
    margin-left:-1px;
    margin-top:-1px;
  }
  .bottomBorderHack{
    margin-top:-1px;
    border-bottom:1px green solid;
    width: 100%;
  }
</style>

<div style="width:10%;">
    <div class="tags-container">
        <div class="tag">Pizza</div>
        <div class="tag">Spaghetti</div>
        <div class="tag">Mandolino</div>
        <div class="tag">Pizza</div>
        <div class="tag">Spaghetti</div>
        <div class="tag">Mandolino</div>
        <div class="tag">Mandolino</div>
        <div style="clear: both"></div>
    </div>
    <div class="bottomBorderHack"></div>
</div>

注意，我使用了绿色的底部边框，这样更加显眼。此外，如果您不想指定 .bottomBorderHack 和 .tags-container 的宽度，则需要您的浏览器支持 box-sizing。

- Gab

---

谢谢！这个hack适用于已知容器宽度（例如width: 100px）。但是我能否让这个hack适用于未知宽度（例如width: 100%）？ - Kurt UXD

已更新答案 ^^ - Gab