如何均匀地水平分布元素？

小编典典

如何均匀地水平分布元素？

css

我的div网页上有一个宽度固定的容器，其中包含用于登录的表单元素。在这些元素下方有一个提交按钮，忘记密码的链接等。

碰巧最后一个线元素需要的宽度比框提供的宽度少。如何均匀地传播它们？我不要

默认

| ABC |
将线居中

| ABC |
也不是桌子的布局

| A | B | C |

相反，我正在寻找实现的CSS方法：

| ABC |

那是：

在所有元素之间放置相等的空间
将整个内容居中，避免第一侧或最后侧

编辑：效果最好。我为2或3个元素创建了模板，如下所示：

div.spread2evenly> div {
    显示：inline-block;
    *显示：内联；/ *对于IE7 * /
    缩放：1；/ *触发hasLayout * /
    宽度：50％;
    文本对齐：居中；
}

阅读 512

2020-05-16

共1个答案

小编典典

试试这个：

<div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 33%;
    text-align: center;
}

由于您正在处理内联代码块，因此标记之间不能有空格（难看，但可以），否则该空间将可见。

编辑1： 这里是关于inline-block的问题的一些详细信息。您可能还需要添加display: -moz-inline- box;。

编辑2： 同样，33％* 3并非100％。如果您确实想要100％并且不介意divs 之间有一些空间，则可以执行以下操作：

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    margin-left: 2%;
    width: 32%;
    text-align: center;
}

.container > div:first-child {
    margin-left: 0;
}

2020-05-16