CSS에서 진정한 수평 목록을 만드는 방법은 무엇입니까?

가로 목록 항목 만들기

가로 목록을 만들려고 할 때 목록 항목이 가로로 정렬되지 않는 문제가 발생할 수 있습니다. 이 문제를 해결하기 위한 간단한 해결책은 다음과 같습니다.

문제:

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

display: inline 및 자동 여백을 사용하면 원하는 결과가 나오지 않습니다.

해결책:

ul > li {
    display: inline-block;
}

목록 항목에 display: inline-block을 사용하면 수평 흐름 내에서 개별 블록처럼 작동합니다. 이렇게 하면 각 항목이 콘텐츠를 래핑하고 가로로 정렬됩니다.

업데이트된 코드 조각은 다음과 같습니다.

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

위 내용은 CSS에서 진정한 수평 목록을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!