下图显示了所需的结果:
我使用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;
}
答案 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)
这是使用一些黑客攻击的替代方案。
<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
宽度,则您的浏览器需要支持大小调整。