Question

下图显示了所需的结果：

Desider result

我使用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

Answer 1

~~您可以将上/左border重置为0，并将top属性设为margin-top的负值，以获得结果~~。

实际上，没有需要使用重置边框。

虽然 relative positioning 会在流中预留空间以防止更改布局，但 margin 会逐字地移动元素。

因此，您可以向margin元素添加负顶部/左侧.tag。但是there will be an extra border位于最后一行元素的底部。

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

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

<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 */
}

<强> WORKING DEMO

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

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

<强> UPDATED DEMO

Answer 2

这是使用一些黑客攻击的替代方案。

fiddle here

<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宽度，则您的浏览器需要支持大小调整。

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

2 个答案: