Question

我正在编写一个样式表，我希望在容器内水平显示三个元素（宽度= 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>

最后一个元素显示在前两个元素下面，而我相信它们会被绘制在同一条线上。没有边距，填充或边框。如果width设置为32％，则在完整浏览器窗口中，它们位于同一行（它可以工作），但是当我减小浏览器窗口宽度时，最后一个元素将落在新行上。有人知道为什么会这样吗？

Answer 1

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

如果你真的希望你的内联块相互冲洗，请取出它们之间的空格。

Answer 2

让你的元素成为一个类（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>

Answer 3

我建议玩容器宽度的arround。对我有用的提示是给他们一条线。以下是我的贡献：

http://jsfiddle.net/8dWhF/

内联块元素未按预期显示

3 个答案: