같은 줄에 인라인 블록을 정렬하는 방법: Flexbox와 텍스트 정렬?

동일 라인에 인라인 블록 정렬: 포괄적인 솔루션

동일 라인에 인라인 블록을 정렬하는 것이 어려울 수 있지만 효과적인 솔루션을 사용할 수 있습니다. 일반적으로 사용되는 두 가지 접근 방식을 살펴보겠습니다.

옵션 1: Flexbox

Flexbox는 원하는 정렬을 달성하는 간단하고 유연한 방법을 제공합니다. 디스플레이를 적용하여: flex; 상위 컨테이너에 대해서는 justify-content: space-between;을 사용하여 하위 컨테이너의 배치를 조작할 수 있습니다. 이 접근 방식은 탁월한 브라우저 간 호환성을 제공합니다.

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

옵션 2: 텍스트 정렬

더 넓은 브라우저 지원을 위해 star-hack과 함께 text-align: justify 기술을 활용할 수 있습니다. 이전 버전의 Internet Explorer.

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

.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;
}</code>

이 방법은 :after 의사 요소:

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

를 사용하여 빈 요소를 추가하여 인라인 블록 요소 사이의 분리가 없는 문제를 해결합니다. :after 의사 요소로 인해 발생하는 추가 공간을 제거하고 상위 요소에 대해 글꼴 크기를 0으로 설정하고 하위 요소에 대해 원하는 값으로 재설정합니다.

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

위 내용은 같은 줄에 인라인 블록을 정렬하는 방법: Flexbox와 텍스트 정렬?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!