1

我有一个看起来像这样的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。

我希望我说得足够清楚。

4

3 回答 3

1

如果我理解正确，您希望它们并排放置，然后在行满时换行，而不是在 div 中间。

所有你需要的是

.tag {
    float: left;
}

请参阅此处的小提琴进行演示。

padding-left: 5px;如果您希望它们之间有一些空间，您也可以添加。

于 2013-02-07T08:28:22.480 回答
0

根据您需要/想要支持的浏览器，您可能会发现使用

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

一个更好的解决方案。由于它是<div>您想要应用的，因此该样式不适用于 IE5-7 - 请参阅http://www.quirksmode.org/css/display.html#t03。当然有解决方法 -如何在 IE6 上修复 display:inline-block？- 如果您想在这些浏览器中使用它。

这样做的好处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/。

于 2013-02-07T11:15:23.867 回答
0 
.tag {
    display:inline;
    white-space:nowrap;
    float:left;
}

那行得通。（并在其下添加“清除”空 div 和 clear:both。）

于 2013-02-07T08:27:13.373 回答