How do I really justify a horizontal menu in HTML+CSS?

Why flexbox is a lifesaver

Flexbox is the maestro of layout arrangements. It allows you to distribute elements uniformly within a container. Extremely adaptive and fluid, it's a smooth way to arrange your menu items without meddling with fixed dimensions and recalculating widths.

Dealing with fluctuating menu items

Handling fluctuating number of menu items is a snap with flexbox. Use the justify-content: space-between; property to maintain equal space on both sides of each item. Odd, even, short, long, your menu always looks prim and proper.

For a classic look, a pseudo-element might do the trick:

.nav::after {
  content: '';
  flex: 1 1 auto;
}


This tiny trick tells the flex container to consider one more item, achieving perfect justification without unnecessary additional markup.

Semantic HTML approach for menus

Use <ul> as the container and <li> elements for the different items. Pair semantic HTML structure with accessibility and styling flexibility:

.nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.nav ul li {
  display: inline-block;
}


Remember to reset padding and margin to ensure clean alignment.

Ensuring cross-browser compatibility

Including vendor prefixes maximizes compatibility with various browsers:

.nav {
  display: -webkit-box; /* For the not-so-new: iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox; /* Because, IE 10. No other reason! */
  display: flex; /* The star of the show! */
  justify-content: space-between;
}


Catering to the oldies of browserkind

In case really old browsers are still on your party list, display: table-cell; might be your last resort. Although it's not a perfect clone of flexbox, it can be a decent stand-in:

.nav li {
  display: table-cell; /* Horizontal alignment ain't a thing to worry! */
  text-align: center;
}
.nav {
  display: table; /* For really old buddies */
  width: 100%;
}


A little tinkering with cell padding and you're set. Remember, this strategy is a bit tricky with responsive design.

Outmanoeuvring the inline-block conundrum

display: inline-block; can be a wee bit cantankerous. It tends to add awkward spaces between elements, messing up your perfect justification:

<nav class="nav-inline">
  <a href="#">Home</a><!--
--><a href="#">About</a><!--
--><a href="#">Services</a><!--
--><a href="#">Contact</a>
</nav>


This "comment-injection" strategy eliminates those white spaces, keeping your justification alignment perfect.

Tailoring your menu visuals

Padding and margin on list items or links grant you all the control you need to fine-tune spacing and ensure visual appeal. Experiment to find the perfect balance:

.nav a {
  display: inline-block;
  padding: 10px; /* Comfy cushions, eh? */
}


Styling list items with a border or background helps visually separate items, enhancing user experience and guides users better about the clickable area.