行内块元素不按预期方式显示

我正在编写样式表，并且我想在容器内水平显示三个元素（宽度= 33％），并使用相对布局。下面的代码：行内块元素不按预期方式显示

#container 
{ 
    margin:auto; 
    width:85%; 
    padding:0; 
} 
#element 
{ 
    display:inline-block; 
    width:33.3%; 
    margin-left:0; 
    margin-right:0; 
    border:0px; 
    text-align:center; 
    }

我不明白为什么有三个要素：

<div id="container"> 
<div id="element">hi</div> 
<div id="element">every</div> 
<div id="element">one</div> 
</div>

的最后一个元素显示前两以下，而我相信他们会在同一绘制线。没有边距，填充或边框。如果宽度设置为32％，则在全部浏览器窗口中，它们位于同一行上（工作原理），但是当我缩小浏览器窗口宽度时，最后一个元素将落在新行上。有谁知道为什么会发生这种情况？

来源

2011-05-02 Archimedis

在所有浏览器中？ – MeLight 2011-05-02 13:54:56

对于元素使用类名而不是id，文档中id应该是唯一的。不会解决你的问题，只是说。 – 2011-05-02 13:55:36

@MeLight嗯我试过在FF 3.6和rekonq – Archimedis 2011-05-02 14:20:22

这些是内联块，所以它们就像字符一样布置（基本上认为它们是真正的大字符）。在你的情况下，你在它们之间留有空白，这样空白就变成了渲染中内联块之间的一行上的单个空格;你可以看到这个，如果你把边界放在它们上面。所以三者共同占用的空间最终为“容器宽度的99.9％加上容器字体中两个空间的宽度”。当你减少到32％时，一旦两个空间加起来超过容器宽度的4％（这就是为什么它只发生在较小的容器宽度上），就会发生断线。

如果你真的想让你的内联块相互冲突，拿出它们之间的空间。

来源

2011-05-02 14:17:33

太棒了！我知道还有别的东西被渲染，但我看不到它！真的，真的很感谢你！ – Archimedis 2011-05-02 14:33:20

非常欢迎您！ – 2011-05-02 15:26:58

使你元素类（thanx Jarrett），并添加float:left样式到该类。

.element 
{ 
    display:inline-block; 
    width:33.3%; 
    margin-left:0; 
    margin-right:0; 
    float:left; 
    border:0px; 
    text-align:center; 
    } 


<div id="container"> 
<div class="element">hi</div> 
<div class="element">every</div> 
<div class="element">one</div> 
</div>

来源

2011-05-02 13:59:31 MeLight

OMG，抱歉id/class错误（也许我需要睡xD）。无论如何，它的工作原理，谢谢！ =）你能解释一下为什么没有浮动属性它不起作用？ – Archimedis 2011-05-02 14:08:42

如果你要浮动，使用“内联块”没有意义，因为浮动会强制显示“阻止”......但更重要的是，你并没有问这个问题，这是_why_内联块行为就是这样。 ;） – 2011-05-02 14:18:23

小心漂浮。如果你的容器不是浮动的，你的元素类将会出现在容器框中。如果你在它们周围放置边框，你会看到容器的高度没有扩展到与类元素相匹配。漂浮是讨厌的，应谨慎使用嵌套。 – robx 2011-05-02 17:56:27

我建议玩容器宽度的圆形。为我工作的提示是给他们一条线。以下是我的贡献：

http://jsfiddle.net/8dWhF/

来源

2011-05-02 14:17:47 gutierrezalex

行内块元素不按预期方式显示

回答

相关问题