嵌套div:我如何获得重叠边框?

时间:2014-03-14 16:55:08

标签: html css

下图显示了所需的结果:

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

2 个答案:

答案 0 :(得分:8)

您可以将上/左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

答案 1 :(得分:1)

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

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