html - 如何水平均匀分布元素？

Question

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

碰巧最后一行元素需要的宽度小于框提供的宽度。如何均匀分布？我不要

• 默认

| A B C           |

• 像这样将线居中

|      A B C      |

• 也不是表格布局

|  A  |  B  |  C  |

相反，我正在寻找一些 CSS 方法来实现:

|  A    B    C  |

即:

• 在所有元素之间放置大致相等的间距
• 让整个东西居中，避免第一个或最后一个放在一边

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

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

Answer 1

CSS3 flexboxes有better browser support现在，尽管您可能需要为 more browser coverage 添加额外的供应商前缀.

现代方法:

只需将容器元素的display更改为flex，然后利用justify-content property指定浏览器应如何沿主轴分布 flex 元素周围和之间的空间。

在下面的示例中，您会注意到 justify-content: space-around 或 justify-content: space-between 用于使元素均匀分布。

.container {
  display: flex;
}
.container.space-around {
  justify-content: space-around;
}
.container.space-between {  
  justify-content: space-between;
}

<p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<hr />

<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>