Span标签在其直接父级和所有其他包装父级之外泄漏。 Take a look at this fiddle
我已尝试display
,overflow
和其他属性,但我无法弄清楚这一点。它只是一直在泄漏。
如何解决?
.tag {
padding: 2px 5px 3px 5px;
margin-right: 5px;
border: 1px solid red;
white-space: nowrap; /* prevent splitting spans */
}
.tag-wrapper {
border: 1px solid blue;
max-width: 300px;
}
.parent {
border: 1px solid green;
}
<div class="parent">
<div class="tag-wrapper">
<span class="tag">tag 1</span>
<span class="tag">tag 2</span>
<span class="tag">tag 3</span>
<span class="tag">tag 4</span>
<span class="tag">tag 5</span>
<span class="tag">tag 6</span>
<span class="tag">tag 7</span>
</div>
</div>
我试图找到答案,但似乎我不知道该怎么说这个问题。我熟悉崩溃边缘,这似乎是一个不同的问题。
答案 0 :(得分:3)
您可能正在寻找display: inline-block;
。
<span>
元素本质上是内联元素,因此它们的有效高度实际上是基于它们的内容,而不是它们的边界框。通过使其表现为block
元素,您应该达到预期的效果。
Here是您的小提琴的更新版本,这里是更新的tag
CSS:
.tag {
padding: 2px 5px 3px 5px;
margin-right: 5px;
border: 1px solid red;
white-space: nowrap; /* prevent splitting spans */
display: inline-block;
}
答案 1 :(得分:0)