인라인 차단 목록 항목 사이에 간격이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?

인라인 차단 목록 항목의 간격 문제

쿼리:

끊김 없는 메뉴를 만들려는 노력에도 불구하고 인라인- 차단 목록 항목 사이에 눈에 띄는 공백이 표시됩니다.

해결책:

이 간격은 글꼴 설정의 영향을 받는 인라인 블록 속성의 공백 의존적 특성으로 인해 발생합니다. 원래 이는 각 항목 사이에 4px 공간을 렌더링했습니다.

대체 접근 방식:

방법 1:

• 모든 목록 항목을 단일로 실행 line.

방법 2:

• 목록 항목의 끝 태그와 시작 태그를 함께 차단:

<ul>
    <li><div>first</div></li><li><div>first</div></li>
    <li><div>first</div></li><li><div>first</div></li>
</ul>

최적 해결책:

• 글꼴 크기 추가: 0; 상위 요소에 추가하고 목록 항목에 대해 특별히 글꼴 크기를 설정합니다.

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

이 접근 방식은 HTML 가독성을 유지하면서 글꼴의 기본 설정으로 인해 발생하는 원치 않는 공백을 제거합니다.

위 내용은 인라인 차단 목록 항목 사이에 간격이 있는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!