> 웹 프론트엔드 > CSS 튜토리얼 > 내 가로 목록 항목이 제대로 정렬되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

내 가로 목록 항목이 제대로 정렬되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Patricia Arquette
풀어 주다: 2024-12-03 10:22:10
원래의
356명이 탐색했습니다.

Why Doesn't My Horizontal List Items Align Properly, and How Can I Fix It?

가로 목록 형식 지정 솔루션

가로 항목 목록은 일반적인 웹 디자인 요소이지만 형식 지정이 어려울 수 있습니다. 한 사용자는 'float'를 왼쪽으로 설정하려는 시도에도 불구하고 가로 목록이 제대로 정렬되지 않는 문제에 직면했습니다.

제공된 코드 샘플은 가로 목록에 사용된 마크업과 스타일을 보여줍니다.

ul#menuItems {
  ...
}
ul#menuItems li {
  display: inline;
  ...
}
ul#menuItems li a {
  ...
}
로그인 후 복사
<ul>
로그인 후 복사

이 문제는 목록 항목에 표시: 인라인 사용으로 인해 발생했습니다. 이 방법은 목록 항목을 가로로 정렬하는 동시에 항목 사이의 공백도 제거합니다. 이 문제를 해결하려면 목록 항목에 대해 display: inline-block을 사용하도록 코드를 업데이트해야 합니다.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}
로그인 후 복사

이 수정을 사용하면 목록 항목이 원하는 간격으로 가로로 표시됩니다. 다음 업데이트된 HTML 코드도 작동합니다.

<ul>
    
  • some item
  • another item
  • 로그인 후 복사

    위 내용은 내 가로 목록 항목이 제대로 정렬되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿