首頁 > web前端 > css教學 > 主體

CSS兩端對齊

高洛峰
發布: 2017-02-22 13:42:21
原創
1082 人瀏覽過

前面的話

  兩端對齊在導航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>
登入後複製

更多CSS兩端對齊 相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!