如何水平均匀地展开元素？

Question

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

它发生在最后一行元素需要的宽度小于框提供的宽度.如何均匀涂抹？我不想要

• 默认

| A B C           |

• 把这条线居中

|      A B C      |

• 也没有表格布局

|  A  |  B  |  C  |

相反,我正在寻找一些CSS方式来实现:

|  A    B    C  |

那是:

• 在所有元素之间放置相等的空间
• 整个事情的中心是避免第一个或最后一个

编辑: 这个答案效果最好.我创建了2或3个元素的模板,如下所示:

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

Answer 1

CSS3 flexbox现在具有更好的浏览器支持,但您可能需要添加其他供应商前缀以获得更多浏览器覆盖率.

现代方法:

只需display将容器元素更改为flex,然后使用该justify-content属性指定浏览器应如何沿主轴分布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>

Answer 2

怎么样text-align:justify;？

Answer 3

试试这个(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;
}

由于你正在处理内联块,你不能在标签之间有空格(丑陋,但它有效),否则空间将是可见的.

编辑1: 这里是关于inline-block的问题的一些详细信息: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%.如果你真的想要百分之百,并且不介意div你可以做的s 之间的一些空间:

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

Answer 4

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

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