같은 줄에서 인라인 블록을 왼쪽과 오른쪽으로 정렬하려면 어떻게 해야 합니까?

같은 줄에서 인라인 블록 왼쪽과 오른쪽 정렬

인라인 블록을 올바르게 정렬하는 것은 어려울 수 있습니다. 이 문제는 한 줄에 두 개의 인라인 블록(왼쪽과 오른쪽에 하나씩)을 배치하려고 할 때 발생합니다.

그러나 이 문제를 해결할 수 있는 솔루션이 있습니다. 부동 소수점을 사용하는 것은 기준선 정렬을 유지하고 창 크기 조정에 응답하는 데 적합하지 않을 수 있지만 다른 기술은 더 많은 유연성을 제공합니다.

효율적인 정렬을 위해 Flexbox 사용

최신 브라우저는 지원을 제공합니다. flexbox는 정렬에 대한 간결하고 적응 가능한 접근 방식을 제공합니다. 상위 컨테이너에 display: flex 를 할당하고 해당 하위 컨테이너에 justify-content: space-between 을 할당하면 동일한 줄에 유지하면서 효과적으로 간격을 둘 수 있습니다.

.header {
    display: flex;
    justify-content: space-between;
}

텍스트 정렬 정렬 기술

Flexbox가 지원되지 않으면 텍스트 정렬: 정렬 기술 사용을 고려하세요. 이 접근 방식은 단어와 줄 사이에 공백을 균등하게 분배하여 워드 프로세서의 양쪽 맞춤 텍스트와 유사한 효과를 만들어냅니다.

.header {
    text-align: justify;
}

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

그러나 이 기술은 IE7 이하와 같은 브라우저에서 "스타 핵"이 발생하는 경우 추가 고려 사항이 필요합니다. 호환성을 보장하려면 필요합니다.

공백 아티팩트 처리

경우에 따라 인라인 블록으로 인해 원하지 않는 공백이 생겨 정렬에 영향을 미칠 수 있습니다. 이 문제를 해결하려면 상위 요소의 글꼴 크기를 0으로 설정하고 하위 요소에 대해 원하는 값으로 다시 재설정하면 됩니다. 이 접근 방식은 text-align: justify 메소드에 사용된 의사 요소로 인해 생성된 추가 공백을 효과적으로 제거합니다.

위 내용은 같은 줄에서 인라인 블록을 왼쪽과 오른쪽으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!