한 줄에서 인라인 블록 왼쪽 및 오른쪽 정렬
인라인 블록으로 작업할 때 정확하게 정렬하는 것이 어려울 수 있습니다. 한 줄에. 이 기사에서는 이 문제에 대한 두 가지 솔루션, 즉 Flexbox와 텍스트 정렬 정렬을 제공합니다.
Flexbox 솔루션
Flexbox는 우아하고 간결한 솔루션을 제공합니다. 디스플레이를 적용하여: flex; 상위 컨테이너 및 justify-content: space-between; 하위 요소를 정렬하려면 원하는 정렬을 쉽게 얻을 수 있습니다.
<code class="css">.header { display: flex; justify-content: space-between; }</code>
텍스트 정렬 정렬 솔루션
텍스트 정렬 정렬을 사용하는 것도 또 다른 실행 가능한 옵션입니다. 다음은 더 나은 호환성을 위해 이 기술과 일부 브라우저별 해킹을 결합한 CSS 코드의 예입니다.
<code class="css">.header { background: #ccc; 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; } h1 { display: inline-block; margin-top: 0.321em; /* ie 7*/ *display: inline; *zoom: 1; *text-align: left; } .nav { display: inline-block; vertical-align: baseline; /* ie 7*/ *display: inline; *zoom:1; *text-align: right; }</code>
이 접근 방식은 IE7 이상을 포함한 다양한 브라우저에서 잘 작동합니다.
다음과 같은 경우를 기억하세요. 인라인 블록 요소가 공백으로 구분되지 않으면 텍스트 정렬 정렬 솔루션이 작동하지 않을 수 있습니다. 또한 상위 요소의 글꼴 크기를 0으로 설정하고 하위 요소에 대해 원하는 값으로 다시 재설정하면 뒤에 있는 의사 요소로 인해 발생하는 추가 공간을 제거하는 데 도움이 될 수 있습니다.
위 내용은 한 줄에서 인라인 블록을 왼쪽과 오른쪽으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!