CSS Inline-Block Layout Justified navigation bar
Example
The horizontally justified navigation (menu) bar has some number of items that should be justified. The first (left) item has no left margin within the container, the last (right) item has no right margin within the container. The distance between items is equal, independent on the individual item width.
HTML
<nav>
<ul>
<li>abc</li>
<li>abcdefghijkl</li>
<li>abcdef</li>
</ul>
</nav>
CSS
nav {
width: 100%;
line-height: 1.4em;
}
ul {
list-style: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
text-align: justify;
margin-bottom: -1.4em;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
display: inline-block;
}
Notes
- The
nav,ulandlitags were chosen for their semantic meaning of 'a list of navigation (menu) items'. Other tags may also be used of course. - The
:afterpseudo-element causes an extra 'line' in theuland thus an extra, empty height of this block, pushing other content down. This is solved by the negativemargin-bottom, which has to have the same magnitude as theline-height(but negative). - If the page becomes too narrow for all the items to fit, the items will break to a new line (starting from the right) and be justified on this line. The total height of the menu will grow as needed.
