HTML CSS에서 가로 메뉴를 정당화하는 방법은 무엇입니까?

HTML CSS에서 가로 메뉴 정렬: 최종 가이드

가로 메뉴 표시줄을 정렬하는 것은 사소해 보이는 작업이지만 깔끔한 방법을 찾는 것은 그리고 다양한 콘텐츠에 적응하는 유연한 솔루션은 놀라울 정도로 어렵습니다.

문제

메뉴를 실제로 정당화하려면 각 항목을 텍스트가 한 줄에 있는 것처럼 배치해야 합니다. 이는 첫 번째 항목을 왼쪽 정렬하고, 마지막 항목을 오른쪽 정렬하고, 나머지 항목을 그 사이에 균등하게 배포하는 것을 의미합니다.

도전

• 테이블은 셀이 중앙에 있거나 또는 중앙에 있을 때 첫 번째 항목과 마지막 항목을 올바르게 정렬하지 않기 때문에 문제가 있습니다. 왼쪽/오른쪽 정렬.
• 항목 수가 다양하기 때문에 각 메뉴 항목에 대한 최적의 너비를 계산하는 것은 불가능합니다.

해결책

가장 간단한 접근 방식은 시각적으로 남은 공간을 차지하는 요소를 도입한 후 숨겨서 줄 바꿈을 강제하는 것입니다. 범위 요소는 다음과 같이 완벽하게 작동합니다.

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;
}

이 솔루션은 효과적으로 정당화됩니다. 사전 계산이나 추가 마크업이 필요 없는 메뉴 항목입니다.

위 내용은 HTML CSS에서 가로 메뉴를 정당화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!