blocks|key|796336|text|我们只需要justify-content:+space-between和display:+flex，但还是要感谢@Pratul给我们的灵感！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|796337|entityMap^0|5|U|10|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p><code>justify-content: space-between</code>and<code>display: flex</code> is all we needed, but thanks to @Pratul for the inspiration!</p>


blocks|key|796292|text|这是一种简单快捷的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|796293|<div>
++++<span>Span+1</span>
++++<span>Span+2</span>
++++<span>Span+3</span>
</div>|code-block|syntax|javascript|796294|css|796295|div{
++++width:100%25;
}
span{
++++display:inline-block;++++
++++width:33%25;
++++text-align:center;
}|796296|然后根据您拥有的数量调整span的width。|offset|length|style|CODE|796297|示例：http://jsfiddle.net/jasongennaro/wvJxD/|796298|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jasongennaro/wvJxD/^0|0|0|0|0|C|4|H|5|0|3|13|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]|$M|17|N|18|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$M|1A|N|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>This is the quick and easy way to do it</p>

<pre><code>&lt;div&gt;
    &lt;span&gt;Span 1&lt;/span&gt;
    &lt;span&gt;Span 2&lt;/span&gt;
    &lt;span&gt;Span 3&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>css</p>

<pre><code>div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}
</code></pre>

<p>Then adjust the <code>width</code> of the <code>span</code>s for the number you have. </p>

<p>Example: <a href="http://jsfiddle.net/jasongennaro/wvJxD/" rel="noreferrer">http://jsfiddle.net/jasongennaro/wvJxD/</a></p>


blocks|key|796658|text|您只需要将id为#menu的div显示为flex容器，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|796659|#menu{
++++width:+800px;
++++display:+flex;
++++justify-content:+space-between;
}|code-block|syntax|javascript|796660|entityMap^0|8|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You just need to display the  div with id <code>#menu</code> as flex container like this:<br/></p>

<pre><code>#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}
</code></pre>


blocks|key|796547|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|796548|.container+{
++padding:+10px;
}
.parent+{
++width:+100%25;
++background:+#7b7b7b;
++display:+flex;
++justify-content:+space-between;
++height:+4px;
}
.child+{
++color:+#fff;
++background:+green;
++padding:+10px+10px;
++border-radius:+50%25;
++position:+relative;
++top:+-8px;
}|code-block|syntax|javascript|796549|<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>|796550|796551|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="parent"&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
    &lt;span class="child"&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|796370|text|使所有跨度都使用内联块元素。在包含菜单项的跨度列表下方创建一个宽度为100%25的空拉伸跨度。接下来，将包含跨度的div设置为text-align:+justified。这将强制内嵌块元素均匀分布您的菜单项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|796371|https://jsfiddle.net/freedawirl/bh0eadzz/3/|offset|length|796372|++<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>|code-block|syntax|javascript|796373|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|17|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>Make all spans used inline-block elements. Create an empty stretch span with a 100% width beneath the list of spans containing the menu items. Next make the div containing the spans text-align: justified. This would then force the inline-block elements [your menu items] to evenly distribute.</p>

<p><a href="https://jsfiddle.net/freedawirl/bh0eadzz/3/" rel="nofollow">https://jsfiddle.net/freedawirl/bh0eadzz/3/</a></p>

<pre><code>  &lt;div id="container"&gt;

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

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


blocks|key|580523|text|我用下面的css组合做到了这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|580524|text-align:+justify;
text-align-last:+justify;
text-justify:+inter-word;|code-block|syntax|javascript|580525|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have managed to do it with the following css combination:</p>

<pre><code>text-align: justify;
text-align-last: justify;
text-justify: inter-word;
</code></pre>


blocks|key|580754|text|我希望孩子们在容器边缘周围留出一个小间隙来均匀地填充容器空间，所以我发现这样做效果最好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|580755|#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;
}|code-block|syntax|javascript|580756|添加强颜色只是为了向您显示间距和边框的效果:-)|580757|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I wanted the children to fill the container space evenly with a small gap around the edge, so I found this worked best:</p>
<pre><code>#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;
}
</code></pre>
<p>Strong colors added just to show you the effect of the spacing and borders :-)</p>


<p>This is meant for a menu.<br>
For example I have a div element with 3 spans in it, all of which have some margin, max-width and float (left or right).<br>
It is positioned starting from the left side and goes like this:<br>
<code>[[span1][span2][span3]      - lots of free space here].</code><br>
I want to make it even out like this:<br>
<code>[[span1] - space - [span2] - space - [span3]]</code><br>
How can I do this using CSS? I kinda doubt it is not possible.<br>
Note that I want it to keep the same style when I add or remove a menu item.<br>
HTML:</p>

<pre><code>&lt;div id="menu"&gt;
    &lt;span class="menuitem"&gt;&lt;/span&gt;
    &lt;span class="menuitem"&gt;&lt;/span&gt;
    &lt;span class="menuitem"&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:  </p>

<pre><code>#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;
}
</code></pre>


how to evenly distribute elements in a div next to each other?

这是为菜单准备的。例如，我有一个包含3个跨度的div元素，所有这些元素都有一些边距、最大宽度和浮动(左或右)。它的位置从左侧开始，如下所示：[[span1][span2][span3]      - lots of free space here].我想让它像这样：[[span1] - space - [span2] - space - [span3]]如何使用CSS实现这一点？我怀疑这是不可能的

问如何在div中将元素均匀分布在彼此相邻的位置？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中将元素均匀分布在彼此相邻的位置？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中将元素均匀分布在彼此相邻的位置？
EN