Question

我正在努力在可调整大小的div中均匀地传播五个div。我看过How to spread elements evenly (horizonatly)?但是无法让它发挥作用： - （

问题似乎是，即使我的div宽度设置为20％，如果周围的div宽度不能被5分割，最后一个元素将被包裹到下一行。

我的css就是这个

#exposureSummaryContainer > div { width: 20%;display: inline-block;}

和我的HTML：

<div id="exposureSummaryContainer">
    <div>1.000.000</div>
    <div>1.000.000</div>
    <div>1.000.000</div>
    <div>1.000.000</div>
    <div>1.000.000</div>
</div>

如何确保所有五个元素都保持在同一条线上？

我做了http://jsfiddle.net/GTwFb/来说明我的问题。

Answer 1

添加float:left;

#exposureSummaryContainer > div { width: 20%;display: inline-block; float:left; background:red}

<强> DEMO

Answer 2

如果你删除它，有一个你看不到的空白，

＆LT; div id="exposureSummaryContainer"><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div></div>

它应该有效。

Answer 3

这可能不是最好看的方式..但它的工作

#exposureSummaryContainer { width: 100%; display: table; }
#exposureSummaryContainer > div { width: 20%;display: table-cell;}

您可以将width修改为特定尺寸

Answer 4

问题是div元素显示为inline-block时标记之间的物理空间，因此解决方法如下：

#exposureSummaryContainer {
    white-space: nowrap;
    word-spacing: -3px;
    letter-spacing: -3px;
}

#exposureSummaryContainer > div { 
    width: 20%;
    display: inline-block;
    white-space: normal;
    word-spacing: normal;
    letter-spacing: normal;
}

Answer 5

我会使用float: left;属性

这对我有用： http://jsfiddle.net/GTwFb/2/

Answer 6

好吧，我会告诉您表格的诀窍：

<table style="width:whateveryouwant">
<tr>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
</tr>
</table>

这一直对我有用^ _ ^

舍入宽度也称为均匀扩展div

6 个答案: