인라인 블록 요소가 왜 잘못 정렬됩니까? 이 문제를 해결하는 방법?

인라인 블록 요소 오정렬 문제 및 대처 전략

웹 페이지 레이아웃에서 인라인 블록 요소의 오정렬은 때때로 발생하여 프론트 엔드 개발자에게 많은 문제가 발생합니다. 이 기사는이 문제의 원인을 분석하고 효과적인 솔루션을 제공합니다.

문제 현상

HTML 구조가 두 개의 인라인 블록 요소를 포함하여 다음과 같다고 가정합니다.

<div>
    <span class="desc">11<br> 스물 두 번째<br> 33<br> 44</span>
    <span>다른 콘텐츠</span>
</div>

CSS 스타일 :

 기간 {
    디스플레이 : 인라인 블록;
}
.desc {
    오버플로 : 숨겨진;
}

.desc 요소가 overflow: hidden span 같습니다.

탈구의 근본 원인

오정렬 문제는 인라인-블록 요소의 기준 정렬 메커니즘에서 비롯됩니다. overflow: hidden 속성은 요소의 기준선 위치에 영향을 미쳐 후속 인라인 블록 요소가 이전 요소의 기준선과 정렬 될 때 편차가 발생합니다.

효과적인 솔루션

이 문제는 vertical-align 속성을 조정하여 해결할 수 있습니다. 수정 된 CSS 코드 :

 .desc {
    디스플레이 : 인라인 블록;
    너비 : 80px;
    높이 : 80px;
    오버플로 : 숨겨진;
    수직 정상 : 중간; /* 키 수정*/
}

기간 {
    디스플레이 : 인라인 블록;
    수직 정상 : 중간; /* 키 수정*/
}

vertical-align middle 으로 설정하여 모든 인라인 블록 요소를 수직 중간 선으로 정렬하여 기준선 정렬로 인한 오해를 피하십시오.

위의 분석 및 솔루션을 통해 인라인 블록 요소 오정렬 문제를 효과적으로 피하고 웹 페이지 레이아웃의 정확성과 미학을 향상시킬 수 있습니다.

위 내용은 인라인 블록 요소가 왜 잘못 정렬됩니까? 이 문제를 해결하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!