如何强制使inline-block元素换行？

Question

我有一个内联块级元素。

.element {
display: inline-block;
}

我使用jQuery将其重复添加到DOM中。

  var element = $("<div class='element'>");
  $(body).append(element).append(element).append(element).append(element);

但是追加的div没有进行换行。就好像我有以下标记（没有换行）：

<div class="element"></div><div class="element"></div><div class="element"></div><div class="element"></div>

在元素之间添加空格并不能解决问题：

  $(body).append(element).append(" ");

我该如何强制这些元素换行？（我不想使用浮动布局）。

- user1031947

---

为什么不将您的元素转换为块（或者实际上保留它们，因为这是div的默认设置）。内联块通常不是一个好主意...也许您应该尝试展示您想要实现的内容，甚至设置一个小的fiddle（不需要js，只需使用您的输出，这显然是一个css问题）。 - Pevara

Answer 1

如果它们只是设置为inline-block的div元素，它们应该像这样换行：http://jsfiddle.net/72cYy/ 请检查并确保它们的容器/父元素没有white-space:nowrap。否则会导致它们无法换行。

- kyle.stearns

---

默认情况下，Chrome 不会换行行内块级元素。使用 white-space:pre-wrap 可以实现换行。 - Ricky Boyce

这是我想要的，但我希望将div居中在父div中，我应该添加什么？ - BelgoCanadian

这不是答案，因为宽度小于50%的内联块不会换行。 - Dan Froberg

Answer 2

您可以按百分比设定元素的宽度。根据元素数量和您想要如何包裹它，更改百分比值。

- A_AR

Answer 3

或者，如果没有使用 ::before 伪元素，你可以利用它的能力来解决这个问题。

element:before { /* single : to support older browsers */
    display:block;
    width:100%;
}

这是一个针对内联元素的解决方案

- George

Answer 4

我建议使用CSS样式来为元素类创建空白。如果您不想这样做，您可以尝试附加一个不间断空格。

var element = $("<div class='element' />&nbsp;");

- Dennis Martinez

---

很遗憾，我已经尝试过了。.element:after { content : "\a" } 与内联块不兼容。 - user1031947