가로 목록 항목이 올바르게 표시되지 않는 이유는 무엇입니까?

수평 목록 항목: 문제 해결 및 해결 방법

웹사이트에 대한 수평 목록을 만들려고 할 때 문제가 발생했습니다. 'float'를 왼쪽으로 설정하는 것과 같이 일반적으로 제안되는 솔루션을 적용했음에도 불구하고. 이 문제를 진단하고 해결하기 위해 제공된 HTML 및 CSS 구조를 살펴보겠습니다.

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  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;
}

분석

제공된 코드 구조가 거의 정확합니다. . 그러나 'li' 요소의 'display' 속성을 'inline-block' 대신 'inline'으로 설정했습니다. 이렇게 하면 요소가 수평으로 흐르는 것을 방지할 수 있습니다.

솔루션

수평 목록을 생성하려면 'li' 요소의 'display' 속성을 'inline-'으로 수정하세요. CSS에서 'block'을 차단하세요.

ul#menuItems li {
  display: inline-block;
}

제안대로 CSS를 업데이트하면 이제 목록 항목이 다음과 같이 가로로 표시됩니다. 의도했습니다.

위 내용은 가로 목록 항목이 올바르게 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!