HTML 및 CSS에서 가로 메뉴를 어떻게 정당화할 수 있나요?

HTML 및 CSS에서 수평 메뉴 정렬: 종합 가이드

수평 메뉴 표시줄은 일반적인 웹사이트 요소이지만 진정한 정렬을 달성하면 도전이 되십시오. 테이블을 사용하는 기존 접근 방식에는 첫 번째 항목과 마지막 항목이 잘못 정렬되는 등의 제한 사항이 있습니다.

정의 딜레마

메뉴 정당화에는 다음이 수반됩니다.

• 왼쪽 -첫 번째 메뉴 항목 정렬
• 마지막 메뉴 오른쪽 정렬 item
• 나머지 항목의 최적 간격

인라인 솔루션

완벽한 솔루션은 범위 요소를 사용하여 줄 바꿈을 강제하는 것입니다. 이 요소는 나머지 공간을 차지하여 최적의 간격을 보장합니다.

구현

이 방법을 구현하려면:

1. 텍스트 정렬 설정: 양쪽 정렬 ; 메뉴 컨테이너에.
2. 디스플레이 설정: 인라인; 메뉴의 모든 직계 하위 항목에 대해.
3. 디스플레이 설정: inline-block; 메뉴 항목(
4. 요소).
5. 다음 스타일을 사용하여 메뉴에 범위 요소를 추가합니다.

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

이렇게 하면 표시할 수 있는 너비가 충분한 보이지 않는 요소가 생성됩니다. 메뉴 구조의 무결성을 유지하면서 강제 정렬을 수행합니다.

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