CSS의 양쪽 끝에서 정렬을 달성하는 방법에 대한 자세한 설명

이전 단어

  내비게이션 제작에서는 양쪽 끝 정렬이 매우 일반적으로 사용됩니다. 이 글에서는 CSS 양쪽 정렬의 세 가지 구현 방법을 자세히 소개합니다

flex

 Flexible box modelflex는 대부분의 레이아웃을 수용할 수 있는 강력한 탄력적 레이아웃 방법입니다. 물론 효과에는 정렬도 포함됩니다. 주축 정렬을 사용하여 단지<a href="http://www.php.cn/wiki/109.html" target="_blank">if<code>just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-contenty-content 속성space-between

justify-content: space-between;

  세 가지 버전의 flex 호환성을 고려하려면 다음 코드를 사용하세요.

 [참고] IE9-browser

.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;}
.in{background-color: lightblue;padding: 0 10px;}
.display_flex{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.display_flex > *{display: block;}
.justify-content_flex-justify{-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;}
</style>
<ul class="list display_flex justify-content_flex-justify">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>
</ul>

text-align

 수평 정렬text-align 자체에는 align 양쪽 끝justify이라는 속성 값이 있습니다. 그러나 이를 사용하여 양쪽 끝을 정렬할 때 요소 사이에 공백 문자(공백, 줄 바꿈 및 탭 포함)를 추가하는 데 주의해야 합니다. HTML 구조의 <li> 요소 사이에는 줄 바꿈이 있으므로 공백 문자를 추가로 추가할 필요는 없습니다

 하지만 이대로 요소에서는 양쪽 끝을 정렬하는 효과를 얻을 수 없습니다

 요소는 반드시 채워져야 합니다. 아래와 같이 한 줄이면 충분합니다. 행을 채우는 요소는 양쪽 끝에 정렬할 수 있지만, 행을 채우지 않는 요소는 정렬할 수 없습니다.

【text-align-last】

 분명히 위의 상황 중 어느 것도 충족되지 않습니다 이때 text-align-last

텍스트의 마지막 줄 정렬 방법을 지정하는 데 사용되는

속성을 ​​사용해야 합니다. 따라서 text-align 속성을 ​​text-align-last으로 바꾸세요. 단, IE 브라우저와 호환되기 위해서는 text-align:justify

설정이 동시에 필요합니다. - [참고] Safari 브라우저, IOS, androis4.4-browser는 지원하지 않습니다.

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;text-align-last: justify;}
.in{background-color: lightblue;padding: 0 10px;display:inline-block;}
</style>
<ul class="list ">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

【 의사 요소 뒤】

  text-align-last를 사용하면 양쪽 끝을 정렬하는 효과를 얻을 수 있지만 호환성이 좋지 않습니다. 의사 요소 <a href="http://www.php.cn/wiki/978.html" target="_blank">:after<code><a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a>를 상위 요소로 설정하고 의사 요소로 만들기 요소는 inline-block로 설정되고 너비는 100%로 설정됩니다. 이는 의사 요소 :after가 두 번째 줄에 압착되는 것과 동일합니다. 결과적으로 원래 요소가 첫 번째 줄을 차지하여 정렬 효과가 발생합니다

  여기에서 공백은 줄바꿈으로 구문 분석되므로 상위 요소의 높이를 설정할 수 있다는 점에 유의해야 합니다height 및 오버플로 숨김, 중복 줄바꿈

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;height: 30px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;}
.in{background-color: lightblue;padding: 0 10px;display:inline-block;}
.list:after{content:"";width:100%;display:inline-block;}
</style>
<ul class="list ">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

열

다중 열 레이아웃column을 사용하여 유사한 효과를 얻을 수도 있습니다. column-count은 요소의 열 수를 정의합니다. 예제에서는 하위 요소가 3개이므로 3개의 열로 정의됩니다. 적용하려면 이때 하위 요소를 블록 요소로 설정해야 한다는 사실에 특별한 주의를 기울여야 합니다.

 [참고] IE9 브라우저는

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;}
.col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.in{background-color: lightblue;padding: 0 10px;display:block;}
</style>
<ul class="list col3">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

 세로 막대가 있는 경우를 지원하지 않습니다. 하위 요소 사이에 사용해야 하며, 수직선의 높이가 하위 요소의 높이와 같은 경우 column-rule를 사용하여

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;}
.col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.col-rule{-webkit-column-rule: 1px solid black;-moz-column-rule: 1px solid black;column-rule: 1px solid black;}
.in{background-color: lightblue;padding: 0 10px;display:block;}
</style>
<ul class="list col3 col-rule">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

요구 사항을 편리하게 구현합니다.

위 내용은 CSS의 양쪽 끝에서 정렬을 달성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!