CSS兩端對齊怎么實現(xiàn)

這篇文章主要講解了“CSS兩端對齊怎么實現(xiàn)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS兩端對齊怎么實現(xiàn)”吧！

靜樂ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

flex

彈性盒模型flex作為強(qiáng)大的彈性布局方式，可以hold住大部分的布局效果，當(dāng)然也包括兩端對齊?？梢允褂弥鬏S對齊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">內(nèi)容</li>
    <li class="in">樣式</li>
    <li class="in">行為</li></ul>

text-align

水平對齊text-align本身就有一個屬性值是兩端對齊justify。但是，要注意的是，使用它實現(xiàn)兩端對齊，需要注意在元素之間添加空白符(包括空格、換行符、制表符)才起作用。由于HTML結(jié)構(gòu)中，<li>元素之間存在換行，所以不需要額外添加空白符

但僅僅是這樣，元素也無法實現(xiàn)兩端對齊效果

元素必須占滿一行才行，如下所示。占滿一行的元素可以實現(xiàn)兩端對齊，沒有占滿的則無法實現(xiàn)

【text-align-last】

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

于是把text-align屬性替換成text-align-last。但是，要兼容IE瀏覽器需要同時設(shè)置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">內(nèi)容</li>
    <li class="in">樣式</li>
    <li class="in">行為</li>  </ul>

【after偽元素】

使用text-align-last可以實現(xiàn)兩端對齊的效果，但是兼容性并不好。通過給父元素設(shè)置偽元素:after，并為偽元素設(shè)置inline-block，并設(shè)置寬度100%，相當(dāng)于偽元素:after被擠到第二行。從而使原來的元素占滿了第一行，觸發(fā)了兩端對齊的效果

這里要注意的是，因為空白會被解析為換行，所以可以通過設(shè)置父元素的高度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">內(nèi)容</li>
    <li class="in">樣式</li>
    <li class="in">行為</li>  </ul>

column

使用多列布局column也可以實現(xiàn)類似的效果。column-count定義了元素的列數(shù)，例子中有3個子元素，所以定義為3列。特別要注意的是，這時需要把子元素設(shè)置為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">內(nèi)容</li>
    <li class="in">樣式</li>
    <li class="in">行為</li>  </ul>

如果子元素之間需要使用豎線，且豎線高度與子元素高度相同時，使用column-rule可方便的實現(xiàn)需求

<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">內(nèi)容</li>
    <li class="in">樣式</li>
    <li class="in">行為</li>  </ul>

感謝各位的閱讀，以上就是“CSS兩端對齊怎么實現(xiàn)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS兩端對齊怎么實現(xiàn)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

文章名稱：CSS兩端對齊怎么實現(xiàn)
網(wǎng)頁URL：http://bm7419.com/article38/pssspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、小程序開發(fā)、軟件開發(fā)、云服務(wù)器、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容