This is meant for a menu.
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).
It is positioned starting from the left side and goes like this:
[[span1][span2][span3] - lots of free space here].
I want to make it even out like this:
[[span1] - space - [span2] - space - [span3]]
How can I do this using CSS? I kinda doubt it is not possible.
Note that I want it to keep the same style when I add or remove a menu item.
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;
}
This question is related to
css
I have managed to do it with the following css combination:
text-align: justify;
text-align-last: justify;
text-justify: inter-word;
justify-content: space-between
anddisplay: flex
is all we needed, but thanks to @Pratul for the inspiration!
This is the quick and easy way to do it
<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;
}
Then adjust the width
of the span
s for the number you have.
.container {_x000D_
padding: 10px;_x000D_
}_x000D_
.parent {_x000D_
width: 100%;_x000D_
background: #7b7b7b;_x000D_
display: flex;_x000D_
justify-content: space-between;_x000D_
height: 4px;_x000D_
}_x000D_
.child {_x000D_
color: #fff;_x000D_
background: green;_x000D_
padding: 10px 10px;_x000D_
border-radius: 50%;_x000D_
position: relative;_x000D_
top: -8px;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="parent">_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
<span class="child"></span>_x000D_
</div>_x000D_
</div>
_x000D_
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.
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>
If someone wants to try a slightly different approach, they can use 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;
}
Here is the fiddle: http://jsfiddle.net/ynemh3c2/ (Try adding/removing divs as well)
Here is where I learned about this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can use justify.
This is similar to the other answers, except that the left and rightmost elements will be at the edges instead of being equally spaced - [a...b...c instead of .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>
One gotcha is that you must leave spaces in between each element. [See the fiddle.]
There are two reasons to set the menu items to inline-block:
<li>
) the display must be set to inline or inline-block to stay in the same line.<span>click here</span>
), each word will be distributed evenly when set to inline, but only the elements will be distributed when set to inline-block. EDIT:
Now that flexbox has wide support (all non-IE, and IE 10+), there is a "better way".
Assuming the same element structure as above, all you need is:
<style>
.menu { display: flex; justify-content: space-between; }
</style>
If you want the outer elements to be spaced as well, just switch space-between to space-around.
See the JSFiddle
You just need to display the div with id #menu
as flex container like this:
#menu{
width: 800px;
display: flex;
justify-content: space-between;
}
In the 'old days' you'd use a table and your menu items would be evenly spaced without having to explicitly state the width for the number of items.
If it wasn't for IE 6 and 7 (if that is of concern) then you can do the same in 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;
}
Without having to adjust for the number of items.
Example without table-layout:fixed
- the cells are evenly distributed across the full width, but they are not necessarily of equal size since their width is determined by their contents.
Example with table-layout:fixed
- the cells are of equal size, regardless of their contents. (Thanks to @DavidHerse in comments for this addition.)
If you want the first and last menu elements to be left and right justified, then you can add the following CSS:
div.demo span:first-child {
text-align: left;
}
div.demo span:last-child {
text-align: right;
}
Source: Stackoverflow.com