같은 줄에 인라인 블록을 수평으로 정렬하는 방법은 무엇입니까?

인라인 블록을 같은 선에 수평으로 정렬

문제

인라인 블록은 기준선 정렬 및 자동 센터링과 같은 부동 요소에 비해 장점을 제공합니다. 뷰포트가 좁아지면. 그러나 두 개의 인라인 블록을 같은 줄에 수평으로 정렬하는 것은 어려울 수 있습니다.

인라인 블록 정렬의 과제

• 플로트는 기준선 정렬을 방해하고 원치 않는 순환을 일으킬 수 있습니다. .
• 상대 및 절대 위치 지정으로 인해 부동 소수점과 유사한 간격 문제가 발생할 수 있습니다.

해결책: 텍스트 자리맞추기 사용

효과적인 해결 방법 중 하나는 텍스트 정렬을 활용하는 것입니다. : 양쪽 정렬 기법:

CSS 코드

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

설명

• 텍스트를 너비 전체에 균등하게 분배하려면 상위 요소의 텍스트 정렬을 "양쪽 정렬"로 설정하세요.
• 인라인 블록 사이의 남은 공간을 사용하려면 after에 의사 요소 헤더를 추가합니다.
• 표시할 인라인 블록 h1 및 .nav 설정: inline-block 및 Vertical-align : 기준선을 유지하기 위한 기준선입니다.

위 내용은 같은 줄에 인라인 블록을 수평으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!