清除内联块？

Question

我有

.centered-holder {
    margin-left: auto;
    margin-right: auto;
    clear: left;
    display: inline-block;
}

然后

<div class="centered-holder">misc content 1</div>
<div class="centered-holder">misc content 2</div>
<div class="centered-holder">misc content 3</div>

我只希望每行最多一个，这实际上可能吗？这是一个 iPhone HTML5 应用程序，所以旧的浏览器限制不是问题。

Answer 1

取决于您的 CSS 声明和标记，但您可以尝试将此 CSS 声明放在父容器上：

white-space: pre-line;

通过这种方法，您可以避免将.centered-holder 转换为块元素，并且您仍然可以在父容器上使用例如text-align:center。

---

行前 - 此值将导致空格序列折叠成单个空格字符。换行将发生在任何地方 必须填充行框，以及标记中的新行（或 在生成的内容中出现“\a”）。换句话说，就像 正常，除了它会遵守明确的换行符。

您可以在此处找到有关空白的更多信息：

• http://reference.sitepoint.com/css/white-space
• http://www.w3.org/TR/css3-text/#white-space

---

最后，您可以使用这些 CSS 声明：

.parent-container {
    white-space: pre-line /* Create new line for each DIV */;
    line-height:0 /* Mask the extra lines */;
    *white-space: pre /*FixIE7*/;
    *word-wrap: break-word /*FixIE7*/;
}

.centered-holder {
    display: inline-block;
    line-height:100% /* Restore a default line-height */;
    *display: inline /*FixIE7*/;
    *zoom: 1 /*FixIE7*/;
}

我发现这个问题很有趣，所以我还给出了 IE6-7 的 CSS 声明（pre-line 和 inline-block 修复）。它应该对其他有类似问题的人有用。

Answer 2

将display:inline-block 更改为display:table 可能会成功。

默认情况下，表格会清除其兄弟元素（如块 div），并且其宽度会扩展以适应其内容（如内联 div）。

Answer 3

如果您删除 display: inline-block;，它们将一个在另一个之上。

块级元素从新行开始，DIV默认是块级的。

Answer 4

或者您可以在 inline-blocks 之后添加一个带有显示块的 div。

.centered-holder {
    margin-left: auto;
    margin-right: auto;
    clear: left;
    display: inline-block;
}
.clear-inline {
    display: block;
}

然后

<div class="centered-holder">misc content 1</div>
<div class="clear-inline"></div>
<div class="centered-holder">misc content 2</div>
<div class="clear-inline"></div>
<div class="centered-holder">misc content 3</div>
<div class="clear-inline"></div>