같은 줄에서 두 개의 인라인 블록 요소를 왼쪽과 오른쪽으로 정렬하는 방법은 무엇입니까?

두 개의 인라인 블록을 같은 줄에 왼쪽과 오른쪽으로 정렬

최신 웹 개발에서는 두 개의 인라인 블록 요소를 왼쪽과 오른쪽으로 정렬 같은 라인에서 겉으로는 복잡한 작업이 될 수 있습니다. 그러나 올바른 기술을 사용하면 접근 방식이 단순화될 수 있습니다.

Flexbox

Flexbox는 간단한 솔루션을 제공합니다. 상위 컨테이너에 display: flex 를 적용하고 하위 컨테이너에 justify-content: space-between을 적용하면 요소를 동일한 간격으로 컨테이너의 반대쪽 끝에 배치할 수 있습니다. 이는 다음과 같이 쉽게 구현할 수 있습니다.

<code class="css">.header {
    display: flex;
    justify-content: space-between;
}</code>

Text-Align: Justify

대안 기술로는 상위 요소에서 text-align: justify를 활용하는 것이 있습니다. 그러나 이를 위해서는 이전 브라우저와의 호환성을 보장하기 위해 추가 해킹이 필요합니다.

<code class="css">.header {
    text-align: justify;
    /* IE 7 */
    *width: 100%;
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}</code>

:after 의사 요소로 추가 공간이 삽입되는 것을 방지하려면 다음 트릭을 사용할 수 있습니다.

<code class="css">.header {
    font-size: 0;
}
h1, .nav {
    font-size: 14px;
}</code>

상위 요소의 글꼴 크기를 0으로 설정하고 하위 요소에 대해 재설정하면 문제가 해결될 수 있습니다.

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