How to Justify a Horizontal Menu in HTML CSS?

Justifying a Horizontal Menu in HTML CSS: The Definitive Guide

Justifying a horizontal menu bar is a seemingly trivial task, but finding a clean and flexible solution that adapts to varying content is surprisingly challenging.

The Problem

To truly justify a menu, each item should be positioned just as text would be on a single line. This means left-aligning the first item, right-aligning the last item, and distributing the remaining items evenly in between.

The Challenges

• Using a table is problematic as it does not align the first and last items correctly when cells are centered or left/right-aligned.
• Calculating optimal widths for each menu item is not feasible due to the varying number of items.

The Solution

The most straightforward approach involves forcing a line break by introducing an element that visually occupies the remaining space and then hiding it. A span element works perfectly for this:

HTML

<div>

CSS

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

This solution effectively justifies the menu items without the need for pre-calculations or additional markup.

The above is the detailed content of How to Justify a Horizontal Menu in HTML CSS?. For more information, please follow other related articles on the PHP Chinese website!