A Simple CSS Horizontal Navigation Bar Using inline-block

The effect of every line of code can be observed using a simple Browser-Sync docker image.

The HTML code for the horizontal navigation bar is as follows.

<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a class="active" href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>

A horizontal navigation bar can be done in two different ways. One uses inline-block and the other uses float. In this article only the inline-block method is provided.

The code for a horizontal navigation menu, which use inline, is as follows. Critical steps are marked and explained.

* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
text-align: center; /* step 6 */
}
nav li {
display: inline-block; /* step 1 */
width: 20%; /* step 4 */
margin-right: -4px; /* step 5 */
}
nav a {
display: block; /* step 2 */
text-decoration: none; /* step 3 */
}
/* common text style */
nav a {
font-family: sans-serif;
height: 40%; /* vertically center */
line-height: 40%; /* vertically center */
color: #fff;
}
nav a:hover {
background-color: #005f5f;
}

nav a.active {
background-color: #eee;
color: #444;
cursor: default;
}

Step 1: set display: inline-block for every <li> inside the <nav>. This code causes the all <li> to stay in the same line. This also allows me to control the width, margin and padding.

Step 2: setdisplay: block for every <a> inside the <nav>. This also allows me to control the width, margin and padding.

Step 3: remove the default underline.

Step 4: set width to 20%. There are five links. 5 x 20% = 100%.

It would be noticed that the last link goes to the next line in this step. Because for inline-block elements, a bit of margin is added to those elements (as explained in this article). One workaround is to use negative margin.

Step 5: add negative margin. The amount of negative margin should be determined by trail and error. (There are so many workarounds in CSS. Feel bad.)

Step 6: center the navigation bar.

OK it is done.

Love podcasts or audiobooks? Learn on the go with our new app.