Question

这适用于菜单例如，我有一个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;
}

Answer 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示例 - 无论内容如何，单元格大小相同。 （感谢@DavidHerse对此添加的评论。）

http://jsfiddle.net/kqHWM/

如果您想要左右对齐第一个和最后一个菜单元素，那么您可以添加以下CSS：

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

Answer 2

你可以使用对齐。

这与其他答案类似，只是左边和右边的元素位于边缘而不是等间距 - [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>

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

将菜单项设置为内联块有两个原因：

如果元素默认为块级项目（例如<li>），则必须将显示设置为内联或内联块以保持在同一行。
如果元素有多个单词（<span>click here</span>），则每个单词在设置为内联时均匀分布，但只有元素在设置为内联块时才会分发。

See the JSFiddle

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

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

如果您希望外部元素也是间隔的，只需将空间切换到空间即可 See the JSFiddle

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

Answer 4

justify-content: space-between和display: flex就是我们所需要的，但感谢@Pratul的灵感！

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

然后根据您的号码调整width的{{1}}。

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

Answer 6

我设法通过以下CSS组合来做到这一点：

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

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

Answer 8

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

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

Answer 9

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

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>

如何在div中将元素均匀分布在彼此旁边？

9 个答案: