Question

我正在尝试使用一个水平的div行，所有div都具有相同的宽度并包含一些文本。理想情况下，我不想手动设置其位置，因为使用不同数量的div很难维护/复制。到目前为止，我的两种方法都没有令人满意，它们是： 1.使用一系列div，在css中设置float：left。这样它们都落到左边，当我想要它们时，基本上是合理的，所以它们以均匀的间距填充容器的宽度。 2.使用一系列跨距，在css中为其父级设置text-align：center。这正确地证明了这一点，但是跨度内的文本具有不同的长度，这意味着文本较少的文本比其他文本宽。

如何组合这两个属性：手动设置宽度的能力与div相同，但是能够将位置设置为中心，就像使用text-align的跨度一样。是否有像浮动子对齐的属性？

Answer 1

如果你给他们display: inline-block，你可以设置你的跨度宽度。

Answer 2

如果正确计算div的边距和大小，则可以正确执行。例如，请查看以下小提琴：http://jsfiddle.net/r7KMB/

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.container {
    width : 230px; height:20px;
    border : 1px solid black;
}
.item {
    width: 30px; height: 15px;
    border : 1px solid red;
    margin: 1px 5px 1px 5px;
    display: inline-block;
}

集中对齐水平div

2 个答案: