国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手機端單行文字兩端對齊：用css偽類實現

JasonZhang / 1284人閱讀

摘要：今天在做項目的時候碰到這個問題右側紅線內的小標題單行兩端對齊。兩端對齊的屬性我們知道是，但是這個屬性有它的局限性只能為或多行文字才能實現兩端對齊。也就是說，在現在的情況下，小標題的單行文字僅僅使用是實現不了兩端對齊的。

今天在做項目的時候碰到這個問題：右側紅線內的小標題單行兩端對齊。

兩端對齊的css屬性我們知道是text-align:justify，但是這個屬性有它的局限性：
1.display只能為inline或inline-block
2.多行文字才能實現兩端對齊。
也就是說，在現在的情況下，小標題的單行文字僅僅使用text-align:justify是實現不了兩端對齊的。
那我們就想辦法把這個『單行文字』變成『多行文字』

怎樣讓一塊內容后面多出東西，而又不會使頁面多出垃圾元素呢？嘿嘿，類比清除浮動用到的方法，我們可以很快就想到使用:after偽類來解決問題。

html


    
    
阿斯頓





    
    
阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓





    
    
阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓

css

.small-unit{
    padding: 10px 0;
}
.label{
    position: absolute;
    display: inline-block;
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.label:after{
    display: inline-block;
    content: "";
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.msg{
    display: inline-block;
    margin-left: 5em;
    position: relative;
}
.msg:before{
    content: "：";
    position: absolute;
    left: -1em;
}

效果圖，完美！

注意點

1..label和它的after偽類要部分相同的css屬性，來保證after元素是.label的第二行

{
    display:inline-block;
    text-align: justify;
    overflow: hidden;
    width: 4em;
    height: 40px;
}

2.:冒號推薦寫在.msg元素的before偽類上，寫在label里面或外面都不能滿足需求，具體效果可以自己試試看


或
：

3.最后，將.label元素用絕對定位固定住，順便實現右側多行的效果。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112218.html

相關文章

  • 如何解決text-align: justify;瀏覽器、安卓手機不兼容問題

    摘要：下載安裝的瀏覽器等也沒有問題。但是用安卓手機再帶的瀏覽器，問題就出現了。經過查詢找到一個問題。于是給每個文字之間添加了一個空格，成功解決了各瀏覽器不兼容手機端不兼容的問題。 今天需要切一個響應式網頁，有一行文字，需要實現兩端對齊。 代碼如下： .h_text{ text-align: justify; width: 200px; } 這一行要兩端對齊 根據經驗找到t...

    Bamboy 評論0 收藏0

  • 如何解決text-align: justify;瀏覽器、安卓手機不兼容問題

    摘要：下載安裝的瀏覽器等也沒有問題。但是用安卓手機再帶的瀏覽器，問題就出現了。經過查詢找到一個問題。于是給每個文字之間添加了一個空格，成功解決了各瀏覽器不兼容手機端不兼容的問題。 今天需要切一個響應式網頁，有一行文字，需要實現兩端對齊。 代碼如下： .h_text{ text-align: justify; width: 200px; } 這一行要兩端對齊 根據經驗找到t...

    techstay 評論0 收藏0

  • CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

    摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

    Berwin 評論0 收藏0

  • CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

    摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

    MASAILA 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<