Why are the navigation links stacked when using inline-block?

Question

I want the navigation links: "about", "resume", "projects", and "contact" to line up horizontally in the navigation bar.

Why does this only work with display: inline-block?

It is my understanding that inline-block boxes allows these elements to be side by side. I need it to be inline-block instead of just inline because I want to size it to the nav bar's exact height.

What am I doing wrong?

Here is the HTML and CSS for my nav:

/* ----------------------------NAVIGATION SECTION-------------------------------- */

.headerContainer {
  background-color: #000;
  text-align: center;
  height:60px;
  margin-left: 600px;
  margin-right: 600px;
  font-family: 'Monda', sans-serif;
  text-transform: uppercase;
  position: fixed;
}

nav {
  padding-left: 1000px;
  padding-right: 1000px;
}

nav li {
  list-style: none;
  display: inline-block;
  background-color: #000;
  height: 40px;
  padding-top: 20px;
  width: 120px;
}

nav li:hover {
  background-color: #e1e1e1;
  -webkit-text-stroke: 2px #000;
}

a:link {
  color: #fff;
  text-decoration: none;
  margin-left:25px;
  margin-right:25px;
}

a:visited {
  color: #fff;
}

a:focus {
  color: #fff;
}

a:hover {

}

a:active {
  color: #fff;
}

<!------------------------------NAVIGATION SECTION---------------------------------->
  <header class="headerContainer">
    <nav>
      <ul>
        <!-- you put the end tag ">" at the beginning of next line to get rid of whitespace between the links -->
        <li><a href="#">About</a></li 
        ><li><a href="#">Resume</a></li
        ><li><a href="#">Projects</a></li
        ><li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

score 1 · Answer 1 · answered Oct 05 '22 at 13:54

You have a massive amount of padding inside the nav element.

nav {
  padding-left: 1000px;
  padding-right: 1000px;
}

This doesn't leave very much space for the content to render in.

The li elements are laid out side by side until they run out of space, at which point they word wrap.

If you zoom out, you'll see the fit in one line.

If you look at the live demo in your question, with the very narrow frame, you will see everything squashed to the side.

Don't set a huge padding on the nav element.

Why are the navigation links stacked when using inline-block?

1 Answers1