Home >Web Front-end >CSS Tutorial >How to Justify a Horizontal Menu in HTML CSS?

How to Justify a Horizontal Menu in HTML CSS?

Linda Hamilton
Linda HamiltonOriginal
2024-11-28 00:27:15647browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn