Page 189 - CSS

Chapter 30: Inline-Block Layout

Examples

Justified navigation bar

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

https://riptutorial.com/ 167