Question

我有一系列内联显示的标签框。它们可能超过容器的宽度。在这种情况下，我希望他们创建另一个“想象的”行如下：

[friend][foe][enermy][love]
[hate][indifferent]

我怎样才能达到这个效果？

我的设置现在以某种方式创建了非常奇怪的行为：包含[hate]的框的一小部分（及其背景）实际上在第一行，而框的文本和背景出现在第二行。

[friend][foe][enermy][love][]
[hate][indifferent]

定义这些标签时，我没有做任何奇怪的事情：

.tag-label {
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 10.998px;
font-weight: bold;
line-height: 13px;
margin: 2px;
padding: 1px 4px 2px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: middle;
white-space: nowrap;
}

这是html。我删除一些元素

很长

<div id="content">
    <span class="tag-label">
      <a href="/searches/search_tags?search_type=Listing&amp;tag=search">search (1)</a>
    </span>
    <span class="tag-label">
      <a href="/searches/search_tags?search_type=Listing&amp;tag=text">text (1)</a>
    </span>
    <span class="tag-label">
      <a href="/searches/search_tags?search_type=Listing&amp;tag=cool">cool (1)</a>
    </span>
</div>

Answer 1

根据您发布的代码，我认为默认情况下它与span元素display: inline有关，内联元素在换行时就会这样做。将您的.tag-label样式更改为display: inline-block。

此外，您的.event-item课程甚至没有在您的HTML中使用，如果您还要提供display: inline-block，则完全没必要使用width: 100%进行样式设置。假设元素是一个块（如div），您可以将其保留在display: block，它将自动填充其父元素的宽度。

无论如何，display: inline-block上的span应该这样做。

Answer 2

使用float:left

.event-item .tag-label{
    float:left;
    background-color: #8F8A8A;
}

演示http://jsfiddle.net/gaby/bF247/

CSS溢出框

2 个答案: