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

한 줄에서 인라인 블록 왼쪽 및 오른쪽 정렬

인라인 블록으로 작업할 때 정확하게 정렬하는 것이 어려울 수 있습니다. 한 줄에. 이 기사에서는 이 문제에 대한 두 가지 솔루션, 즉 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!