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>

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： 以下是有关内联块问题的更多信息：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％并且不介意你可以做的div之间的空间：

.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

我不确定您确切的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%;
}

Answer 5

这应该让你开始：

<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正在做什么。

Answer 6

我知道这是一个古老的问题，但是如果仍然有人在寻找这个问题，那么现在可以使用flexboxes来做一个更简单的选择：justifiy-content: space-evenly。这个名字很容易解释。在这里a reference

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

Answer 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.那里得到这个答案的。请原谅我没有提及原始信用，我不知道）

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

7 个答案:

现代方法：