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.