CSS 정렬

이전 단어

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

flex

플렉스 박스 모델 flex는 대부분의 레이아웃을 수용할 수 있는 강력한 탄력적 레이아웃 방법입니다. 물론 효과에는 정렬도 포함됩니다. 주축의 정렬 속성을 사용할 수 있습니다 justify-content space-between

justify-content: space-between;

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

 [ 참고] IE9 브라우저는

.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

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

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

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

【text-align-last】

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

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

속성을 ​​사용해야 합니다. 따라서

속성을 ​​text-align으로 바꾸세요. 단, IE 브라우저와 호환되려면 text-align-lasttext-align:justify

을 동시에 설정해야 합니다. [참고] Safari 브라우저, IOS, androis4.4 - 해당 브라우저는

<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를 상위 요소로 설정하고 :after를 의사 요소로 설정하고 너비를 100%로 설정하면 의사 요소 inline-block가 두 번째 줄에 압착되는 것과 같습니다. 결과적으로 원래 요소가 첫 번째 줄을 차지하여 정렬 효과가 발생합니다 :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은 요소의 열 수를 정의합니다. 예제에서는 하위 요소가 3개이므로 3개의 열로 정의됩니다. 적용하려면 이때 하위 요소를 블록 요소로 설정해야 한다는 사실에 특히 주의해야 합니다. column-count

 [참고] 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 중국어 웹사이트를 주목해주세요!