Question

我有一个看起来像这样的div。

<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....


(in CSS)

.tag {
    display:inline
}

我发现我有太多这些，他们开始在中间打破，我不希望这样。

然而，当我像这样设置nowrap时

.tag {
    display:inline;
    white-space:nowrap;
}

所有这些都在一条线上，占据了100％以上的窗口。我不希望这样。

我想要的是：如果一行中有太多这些div，则div的列表可能会中断，但div本身不会。我只是不想打破中间的div。

我希望我能说清楚。

Answer 1

如果我理解正确，你希望它们并排放置，然后在行满时突破到新行，但不在div的中间。

你需要的只是

.tag {
    float: left;
}

请参阅fiddle here了解演示。

如果您想在它们之间留出一些空间，也可以添加padding-left: 5px;。

Answer 2

.tag {
    display:inline;
    white-space:nowrap;
    float:left;
}

那很有用。（并在其下添加“清除”清空的div：两者都在那之下。）

Answer 3

根据您需要/想要支持的浏览器，您可以使用

.tag {
    display:inline-block;
    vertical-align:top;
}

更好的解决方案。由于您希望将其应用于<div>，因此IE5-7的样式无法正常工作 - 请参阅http://www.quirksmode.org/css/display.html#t03。当然有一些解决方法 - How to fix display:inline-block on IE6? - 如果你想在这些浏览器中使用它。

inline-block的好处是您不需要clear浮动内容，也不需要将正常流量呈现。我尝试尽可能避免浮动元素，因为根据我的经验，它会导致布局问题。

然而，这种方法有两个潜在的捕获量。我已经通过添加vertical-align:top规则解决了其中一个问题。请参阅之前的答案，了解为何会发生这种情况 - https://stackoverflow.com/a/12950536/637889

另一个原因是inline-block元素之间存在潜在不需要的空白区域。有关这方面的一些巧妙方法，请参阅http://css-tricks.com/fighting-the-space-between-inline-block-elements/。

如何在彼此非包装后制作更多div，但整个列表包装？

3 个答案: