Html 如何使元素水平均匀分布？

我的网页上有一个固定宽度的

div

容器，其中包含用于登录的表单元素。在这些元素下面有一个提交按钮、忘记密码链接等

最后一行元素所需的宽度恰好小于框提供的宽度。如何将它们均匀分布？我不想要

• 违约

|A、B、C|

• 以直线为中心

|A、B、C|

• nor表布局

|A | B | C|
相反，我正在寻找一些CSS方法来实现：

| A B C | |A、B、C| 即:

• 在所有元素之间放置大约相等的空间
• 将整个物体居中，以避免第一个或最后一个偏侧

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

div.spread2evenly > div { display: inline-block; *display: inline; /* For IE7 */ zoom: 1; /* Trigger hasLayout */ width: 50%; text-align: center; } div.spread2evenly>div{ 显示：内联块； *显示：内联；/*用于IE7*/ 缩放：1；/*触发器布局*/ 宽度：50%； 文本对齐：居中； }

---

我不确定您的确切HTML是什么，但请尝试以下方法：

.清楚{
明确：两者皆有；
}
.测试{
宽度：350px；
文本对齐：居中；
边框：1px实心#ff0000
}
.测试a{
显示：块；
浮动：左；
宽度：33%；
}

这应该让您开始：

<style type="text/css">

#container {
    width: 210px;
    border: 1px solid blue;
}

#container .part {
    width: 68px; /*(210 / 3 - borders)*/
    float: left;
    text-align: center;
    border: 1px solid yellow;
}

.clear {
    height: 0;
    line-height: 0;
    overflow: hidden;
    font-size: 0;
    clear: left;
}

</style>

#容器{
宽度：210px；
边框：1px纯蓝色；
}
#容器.零件{
宽度：68px；/*（210/3-边框）*/
浮动：左；
文本对齐：居中；
边框：1px纯黄色；
}
.清楚{
身高：0；
线高：0；
溢出：隐藏；
字号：0；
清除：左；
}

然后是HTML：

<div id="container">
    <div class="part">A</div>
    <div class="part">B</div>
    <div class="part">C</div>
    <div class="clear">&nbsp;</div>
</div>

A.
B
C

我只添加了边框，这样你就可以看到CSS在做什么。

试试这个（）：

---

如何

文本对齐：对齐？
现在有了，不过您可能需要为添加额外的供应商前缀

现代方法：
只需将容器元素的
显示更改为
flex
，然后利用来指定浏览器应如何沿主轴在flex项周围和之间分配空间

在下面的示例中，您会注意到
justify content:space around
或
justify content:space between
用于将元素均匀地隔开


.container{
显示器：flex；
}
.集装箱{
证明内容：周围的空间；
}
.container.space-between{
证明内容：之间的空间；
}
使用
调整内容：周围的空格
：

A.
B
C

使用
对齐内容：之间的空格
：

A.
B
C
我想执行一些悬停效果，并调整内容：
之间的空间不是很干净。这对我有帮助

<div style="display: flex;">
  <div style="flex: 1 1 auto"> A </div>
  <div style="flex: 1 1 auto"> B </div>
  <div style="flex: 1 1 auto"> C </div>
</div>


A.
B
C

（我很久以前从另一个S.O.的答案那里得到了这个答案。请原谅我没有提到原始信用，因为我不知道）
我知道这是一个古老的问题，但如果有人仍然碰巧在寻找这个问题，现在使用FlexBox有一个更简单的选择：
证明内容：空间均匀
。这个名字不言自明。这里

那一个很好用！但是如何设置提交按钮之类的格式——它不应该有33%的宽度。知道如何计算%的数字吗？然后用JS做其他事情吗？1/n，其中n是元素数。+1，代码不错。我只是建议混合使用，以避免填充、边距或边框与内部元素接触时出现问题。使用盒子大小属性，也许宽度作为百分比。戴夫，我绝对同意。我的意思是这个答案只是一个起点，而不是一个完美的解决方案。我通常把更精细的细节留给海报，让他们做些事情：）在
-moz内联框
（或
-moz内联堆栈
？）上检查我的答案。另外，不要忘记一点，即
标记之间不能有空格。在这两种方法之间，你应该有你需要的。为什么人们会否决这一点？这个解决方案不需要任何CSS技巧，也可以工作。这是目前为止最好的解决方案。唯一需要记住的是，你需要断开这条线。您可以使用高度为0、宽度为100%的伪元素来实现这一点，即使在2020年，它也缺乏浏览器支持。是否有办法抽象此解决方案，使其适用于任意数量的
div
s，而不仅仅是三个
div
s？当无法说出
容器div
将有多少
div
时，这对于场景非常有用。@Abdull一个flexbox布局，其中
内容对齐
（
之间的空格
或
周围的空格
）这可能是这种情况的最佳解决方案：IE11+和其他主流浏览器都支持这一点。这绝对是最省事的方法。
<div class="test">
    <a href="">A</a>
    <a href="">B</a>
    <a href="">C</a>
    <div class="clear"></div>
</div>

.clear {
   clear:both;   
}

.test {
   width:350px;
   text-align:center;
   border:1px solid #ff0000
}

.test a {
    display:block;
    float:left;
    width:33%;
}

<style type="text/css">

#container {
    width: 210px;
    border: 1px solid blue;
}

#container .part {
    width: 68px; /*(210 / 3 - borders)*/
    float: left;
    text-align: center;
    border: 1px solid yellow;
}

.clear {
    height: 0;
    line-height: 0;
    overflow: hidden;
    font-size: 0;
    clear: left;
}

</style>

<div id="container">
    <div class="part">A</div>
    <div class="part">B</div>
    <div class="part">C</div>
    <div class="clear">&nbsp;</div>
</div>

<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;
}

.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;
}

<div style="display: flex;">
  <div style="flex: 1 1 auto"> A </div>
  <div style="flex: 1 1 auto"> B </div>
  <div style="flex: 1 1 auto"> C </div>
</div>

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