html - 清除行内 block ？

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 转换为 block 元素，并且您仍然可以在父元素上使用例如 text-align:center容器。

---

pre-line - This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like normal except that it’ll honor explicit line breaks.

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

• 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 修复)。它应该对其他一些有类似问题的人有用。