如何在 div 中相邻的元素均匀分布？答案

【问题标题】：how to evenly distribute elements in a div next to each other?如何在 div 中相邻的元素均匀分布？
【发布时间】：2011-08-30 14:35:58
【问题描述】：

这是用于菜单的。
例如，我有一个 div 元素，其中有 3 个跨度，所有这些都有一些边距、最大宽度和浮动（左或右）。
它从左侧开始定位，如下所示：
[[span1][span2][span3] - lots of free space here].
我想让它变得像这样：
[[span1] - space - [span2] - space - [span3]]
如何使用 CSS 做到这一点？我有点怀疑这是不可能的。
请注意，当我添加或删除菜单项时，我希望它保持相同的样式。
HTML：

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS：

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

【问题讨论】：

<span> 不是块元素，它不应该接受width 属性
能否提供实际代码？

标签： css

【解决方案1】：

在“过去”中，您会使用表格，并且您的菜单项会均匀分布，而无需明确说明项数的宽度。

如果不是针对 IE 6 和 7（如果担心的话），那么您可以在 CSS 中做同样的事情。

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS：

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

无需根据项目数量进行调整。

没有table-layout:fixed 的示例 - 单元格均匀分布在整个宽度上，但它们的大小不一定相等，因为它们的宽度由它们的内容决定。

http://jsfiddle.net/w3dx/ULQwf/

table-layout:fixed 的示例 - 单元格大小相同，无论其内容如何。 （感谢 cmets 中的@DavidHerse 提供此补充。）

http://jsfiddle.net/kqHWM/

如果您希望第一个和最后一个菜单元素左右对齐，则可以添加以下 CSS：

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

【讨论】：

使用这种方法，单元格分布不均匀。见jsfiddle.net/hcrzx。中间的单元格比其他两个单元格长。
@Susam: 没错，单元格不一定大小相等，因为单元格的宽度由其内容决定（与 HTML 表格相同）。但是，我仍然会说它们可以被描述为均匀分布，因为它们根据它们的内容在父元素的整个宽度上均匀分布（不一定相等）。如果您想要大小相同的单元格，无论其内容如何，我敢打赌您需要一个脚本解决方案。

【解决方案2】：

你可以使用 justify。

这类似于其他答案，除了最左边和最右边的元素将位于边缘而不是等距 - [a...b...c 而不是 .a..b..c。 ]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

一个问题是您必须在每个元素之间留出空格。 [见小提琴。]

将菜单项设置为 inline-block 有两个原因：

如果元素默认是块级项目（例如<li>），则必须将显示设置为 inline 或 inline-block 以保持在同一行中。
如果元素有多个单词 (<span>click here</span>)，设置为 inline 时每个单词将均匀分布，但设置为 inline-block 时仅分布元素。

See the JSFiddle

编辑：
现在flexbox 得到了广泛的支持（所有非 IE 和 IE 10+），有一个“更好的方法”。
假设元素结构和上面一样，你只需要：

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

如果您希望外部元素也有间距，只需将 space-between 切换为 space-around。
See the JSFiddle

【讨论】：

【解决方案3】：

如果有人想尝试稍微不同的方法，他们可以使用 FLEX。

HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

这是小提琴：http://jsfiddle.net/ynemh3c2/（也可以尝试添加/删除 div）

这是我了解到这一点的地方：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

这就是我要找的机器人！谢谢。

【解决方案4】：

justify-content: space-betweenanddisplay: flex 是我们所需要的，但感谢@Pratul 的启发！

【讨论】：

很酷的答案。提示：使用flex-wrap: wrap 包裹内容。

【解决方案5】：

这是快速简便的方法

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

然后将spans 的width 调整为您拥有的号码。

示例：http://jsfiddle.net/jasongennaro/wvJxD/

【讨论】：

sooo...没有简单的方法让它自动调整宽度？
width: 33%; 是尽可能接近，但它基于父容器，而不是子元素的数量。如果您希望它根据子（跨度）元素进行调整，您可能需要使用 JavaScript。
对@Shauna。 @jurchiks，您可以根据spans 的数量自动计算widths，但这需要一些js。如果您的菜单不经常更改，调整width 应该不是问题。
@josh.trow。我一整天都很慢。
@Jason - 已经做到了（PHP 除外；对 JS 不太了解，也许有人可以教我如何做到这一点？）。看起来不错，但边距成为问题。

【解决方案6】：

您只需将 id 为 #menu 的 div 显示为 flex 容器，如下所示：

#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}

【讨论】：

【解决方案7】：

.container {
  padding: 10px;
}
.parent {
  width: 100%;
  background: #7b7b7b;
  display: flex;
  justify-content: space-between;
  height: 4px;
}
.child {
  color: #fff;
  background: green;
  padding: 10px 10px;
  border-radius: 50%;
  position: relative;
  top: -8px;
}

<div class="container">
  <div class="parent">
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
  </div>
</div>

【讨论】：

【解决方案8】：

使所有跨度都使用内联块元素。在包含菜单项的跨度列表下方创建一个宽度为 100% 的空拉伸跨度。接下来使包含跨度文本对齐的 div：对齐。然后，这将强制 inline-block 元素 [您的菜单项] 均匀分布。

https://jsfiddle.net/freedawirl/bh0eadzz/3/

  <div id="container">

          <div class="social">
            <a href="#" target="_blank" aria-label="facebook-link">
            <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="twitter-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="youtube-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="pinterest-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="snapchat-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="blog-link">
                 <img src="http://placehold.it/40x40">
            </a>

            <a href="#" aria-label="phone-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <span class="stretch"></span>
          </div>
             </div>

【讨论】：

【解决方案9】：

我已经设法使用以下 css 组合来做到这一点：

text-align: justify;
text-align-last: justify;
text-justify: inter-word;

【讨论】：

【解决方案10】：

我希望孩子们用边缘周围的小间隙均匀地填充容器空间，所以我发现这样效果最好：

#menu {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    background-color: #00FF00;
    padding: 10px 0;
}

.menuitem {
    background-color: #FF0000;
    flex-grow: 1;
    text-align: center;
}

添加了强烈的颜色只是为了向您展示间距和边框的效果:-)

【讨论】：