代码之家 › 专栏 › 技术社区 › Daniel Böhmer Ali Shaukat

如何使元素水平均匀分布?

css html

Daniel Böhmer Ali Shaukat · 技术社区 · 14 年前

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

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

违约

| A B C           |

使线居中

|      A B C      |

NOR表格布局

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

7 回复 | 直到 6 年前

Nelson Rothermel 14 年前

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

Josh Crozier HBP 9 年前

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>

Nomistake 12 年前

怎么样 text-align:justify; ?

Diodeus - James MacFarlane 14 年前

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

Cá´ÊÊ bcherry 14 年前

这应该让你开始:

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

Nick 6 年前

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

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

Arun Kumar A.J 6 年前

我想做一些悬停效果 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.的回答中得到了这个答案。请原谅我没有提到原始信用证,因为我不知道)