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

Posted 2023-04-13

【中文标题】如何将元素水平均匀分布？

【英文标题】：How to spread elements horizontally evenly?

【发布时间】：2011-05-05 18:08:30

【问题描述】：

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

碰巧最后一行元素需要的宽度比框提供的要少。如何均匀分布它们？我不想

默认 | A B C | 像这样将线居中 | A B C | 也不是表格布局 |一个 |乙| C |

相反，我正在寻找一些 CSS 方式来实现：

| A B C |

即：

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

编辑： This answer 效果最好。我为这样的 2 或 3 个元素创建了模板：

div.spread2evenly > div 显示：内联块； *显示：内联； /* 对于 IE7 */ 缩放：1； /* 触发器有布局 */ 宽度：50%； 文本对齐：居中；

【问题讨论】：

在-moz-inline-box（或-moz-inline-stack？）上查看我的答案。另外，不要忘记</div><div> 标签之间不能有空格的警告。在这个和 clear both 方法之间，你应该有你需要的。

【参考方案1】：

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

现代方法：

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

在下面的示例中，您会注意到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>

【讨论】：

IE11+等主流浏览器都支持。这绝对是最省事的方法。

【参考方案2】：

试试这个 (http://jsfiddle.net/BYEw5/)：

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

由于你是在处理inline-block，所以标签之间不能有空格（丑，但是可​​以），否则空格是可见的。

编辑 1： 以下是有关内联块问题的更多信息：http://blog.another-d-mention.ro/programming/cross-browser-inline-block/、http://www.aarongloege.com/blog/web-development/css/cross-browser-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;

【讨论】：

有没有办法抽象出这个解决方案，使它适用于任意数量的包含divs，而不仅仅是三个divs？这对于无法说出.container div 将拥有多少个divs 的场景很有用。

@Abdull 带有justify-content（space-between 或 space-around）的 flexbox 布局 可能是这种情况的最佳解决方案：css-tricks.com/snippets/css/a-guide-to-flexbox

【参考方案3】：

text-align:justify; 怎么样？

【讨论】：

为什么人们不赞成这个？这个解决方案不需要任何 CSS 技巧和工作。

这是迄今为止最好的解决方案。唯一要记住的是你需要断线。您可以使用 height: 0 和 width: 100% 的伪元素来实现这一点

即使在 2020 年它也缺乏浏览器支持。

【参考方案4】：

我知道这是一个古老的问题，但如果有人仍然碰巧寻找这个，现在有一个使用 flexboxes 的更简单的选择：justifiy-content: space-evenly。这个名字很不言自明。这里a reference

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

【讨论】：

非常感谢！正是我正在寻找的方法。如果有人不想要第一个元素之前和最后一个元素之后的空格，请改用space-between ;-)

【参考方案5】：

我不确定你的确切 html 是什么，但试试这个：http://jsfiddle.net/k9FqG/

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

【讨论】：

那个效果很好！但是如何格式化提交按钮之类的东西——它的宽度不应该是 33%。

知道如何计算 % 数吗？然后用 JS 做其他事情吗？

1/n，其中 n 是元素的数量。

【参考方案6】：

这应该让你开始：

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

然后是 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>

我只添加了边框，以便您可以看到 CSS 的作用。

【讨论】：

+1，不错的代码。我只是建议混合使用，以避免填充、边距或边框进入内部元素时出现问题。使用 box-sizing 属性，也可以使用百分比表示的宽度。

戴夫，我绝对同意。我的意思是这个答案是一个起点，而不是一个完美的解决方案。我通常把更精细的细节留给海报，让他们有事可做:)

【参考方案7】：

我想执行一些悬停效果，justify-content: space-between 不是很干净。这对我有帮助。

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

（很久以前，我最初是从另一个 S.O. 答案中得到这个答案的。请原谅我没有提及原始信用，因为我不知道）