Html 清除内联块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8177140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clearing inline-blocks?
提问by Baconbeastnz
I have
我有
.centered-holder {
margin-left: auto;
margin-right: auto;
clear: left;
display: inline-block;
}
Then
然后
<div class="centered-holder">misc content 1</div>
<div class="centered-holder">misc content 2</div>
<div class="centered-holder">misc content 3</div>
I only want one max per line, is this actually possible somehow? It's an iPhone HTML5 app so older browser restrictions aren't an issue.
我只想要每行一个最大值，这实际上有可能吗？这是一个 iPhone HTML5 应用程序，因此旧的浏览器限制不是问题。
回答by Etienne
Depend of your CSS declarations and your markup, but you can try to put this CSS declaration on the parent container:
取决于您的 CSS 声明和标记，但您可以尝试将此 CSS 声明放在父容器上：
white-space: pre-line;
With this approach you avoid to transform the .centered-holderto a block element, and you can still use for example the text-align:centeron the parent container.
使用这种方法，您可以避免将 转换.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.
pre-line- 此值将导致空格序列折叠为单个空格字符。换行将出现在任何需要填充行框的地方，以及标记中的新行处（或在生成的内容中出现“\a”处）。换句话说，它和正常一样，只是它会尊重明确的换行符。
You can find more informations here about white-space:
您可以在此处找到有关空白的更多信息：
To finish, you can use these CSS declarations :
最后，您可以使用这些 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*/;
}
I found this question very interesting, so I give also the CSS declarations for IE6-7 (pre-lineand inline-blockfixes). It should be usefull for some other people which have a similar problem.
我发现这个问题很有趣，所以我也给出了 IE6-7 的 CSS 声明（pre-line和inline-block修复）。它应该对其他有类似问题的人有用。
回答by enduro
If you remove display: inline-block;they will stack one on top of the other.
如果您移除display: inline-block;它们，它们会将一个堆叠在另一个之上。
Block-level elements begin on a new line, and a DIV is block-level by default.
块级元素从新行开始，默认情况下 DIV 是块级元素。
回答by Jiminy Cricket
Changing display:inline-blockto display:tablemay do the trick.
更改display:inline-block为display:table可能会奏效。
By default, a table clears it's sibling elements (like a block div), and it's width expands to fit it's content (like an inline div).
默认情况下，表格会清除它的兄弟元素（如块 div），并且它的宽度会扩展以适应其内容（如内联 div）。
回答by Jay Croghan
Or you can just add a single div with display block after the inline-blocks.
或者您可以在内联块之后添加一个带有显示块的 div。
.centered-holder {
margin-left: auto;
margin-right: auto;
clear: left;
display: inline-block;
}
.clear-inline {
display: block;
}
Then
然后
<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>
