HTML 및 CSS에서 수평 텍스트 전용 메뉴를 어떻게 완벽하게 정당화할 수 있습니까?

HTML CSS에서 가로 메뉴 양쪽 맞춤: 포괄적인 솔루션

HTML의 메뉴 표시줄에 대한 수많은 튜토리얼에도 불구하고 텍스트 전용 메뉴에 대한 최적의 양쪽 맞춤을 달성하는 것은 여전히 ​​어려운 과제입니다. . 이 기사에서는 다양한 메뉴 항목 수에 대해 적절한 정렬, 최적의 간격 및 유연성을 보장하는 강력한 솔루션을 제시합니다.

문제 이해

목표는 다음과 같은 수평 메뉴를 만드는 것입니다.

• 첫 번째 항목은 왼쪽 정렬
• 마지막 항목은 오른쪽 정렬
• 나머지 항목은 메뉴 표시줄에 고르게 분포됩니다
• 이 솔루션은 최적의 너비를 미리 계산하지 않고 다양한 수의 항목과 함께 작동해야 합니다

보이지 않는 것 확장 범위

이러한 정당화를 달성하는 핵심은 메뉴 끝에 보이지 않는 요소를 삽입하여 줄 바꿈. 이 요소를 전략적으로 숨겨 최적의 항목 배포에 필요한 공간을 만들 수 있습니다.

최적의 CSS 및 HTML 코드는 다음과 같습니다.

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

<div>

작동 방식

1. #menu는 전체 메뉴의 정렬을 설정합니다.
2. #menu *는 모두 보장합니다. 하위 항목은 인라인 요소입니다.
3. #menu li는 메뉴 항목을 인라인 블록으로 만들어 수평으로 흐르게 합니다.
4. 숨겨진 범위(#menu 범위)가 나머지 공간을 채우기 위해 확장되어 줄바꿈을 사용하고 메뉴를 적절하게 양쪽 정렬합니다.

이 솔루션은 HTML CSS에서 양쪽 정렬된 가로 메뉴를 만드는 우아하고 효과적인 방법을 제공합니다. 메뉴 항목 수에 상관없이 최적의 간격과 정렬을 제공합니다.

위 내용은 HTML 및 CSS에서 수평 텍스트 전용 메뉴를 어떻게 완벽하게 정당화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!