CSS如何?左右對齊詳解

前面的話

  左右對齊在導航Nav的製作中非常常用。本文將詳細介紹CSS左右對齊的3種實現方式

flex

  彈性盒模型flex作為強大的彈性布局方式，可以hold住大部分的布局效果，當然也包括左右對齊。可以使用主軸對齊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

  水平對齊text-align本身就有一個屬性值是左右對齊justify。但是，要注意的是，使用它實現左右對齊，需要注意在元素之間添加空白符(包括空格、分行符號、定位字元)才起作用。由於HTML結構中，<li>元素之間存在換行，所以不需要額外添加空白符

  但僅僅是這樣，元素也無法實現左右對齊效果

  元素必須佔滿一行才行，如下所示。佔滿一行的元素可以實現左右對齊，沒有佔滿的則無法實現

【text-align-last】

  顯然，上面的情況都不符合要求，這時就需要使用屬性text-align-last，該屬性用來規定如何對齊文本的最後一行

  於是把text-align屬性替換成text-align-last。但是，要相容IE瀏覽器需要同時設定text-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>

【after虛擬元素】

  使用text-align-last可以實現左右對齊的效果，但是相容性並不好。通過給父元素設定虛擬元素:after，並為虛擬元素設定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也可以實作類別似的效果。column-count定義了元素的列數，例子中有3個子項目，所以定義為3列。特別要注意的是，這時需要把子項目設定為block元素才會生效

  [注意]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>