HTML – 清除内联块?

前端之家收集整理的这篇文章主要介绍了HTML – 清除内联块?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有
.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应用程序,因此较旧的浏览器限制不是问题。

解决方法

取决于您的CSS声明和标记,但您可以尝试将此CSS声明放在父容器上:
white-space: pre-line;

使用此方法可以避免将.centered-holder转换为块元素,并且仍然可以在父容器上使用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修复)。它应该对其他有类似问题的人有用。

猜你在找的HTML相关文章