資訊專欄INFORMATION COLUMN
摘要：需求如下，紅框所在的文字有四個字的三個字的兩個字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。其實現(xiàn)的效果就是可以讓一行文字兩端對齊顯示文字內(nèi)容要超過一行。
需求如下，紅框所在的文字有四個字的、三個字的、兩個字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。但是如果要像下面這樣兩端對齊呢？
我相信以前很多人都這么干過：兩個字中間使用 來隔開達到四個字的寬度，三個字也可以，但是，像上圖中“122賬號”“122密碼”這樣的，就不好計算該用幾個空格了。
假如我們有如下HTML：
這世間唯有夢想和好姑娘不可辜負！
給它加點樣式
div{
width:500px;
border:1px solid red;
text-align: justify;
}
初始效果是這樣的
text-align: justify這是什么東西？CSS2中text-align有一個屬性值為justify，為對齊之意。其實現(xiàn)的效果就是可以讓一行文字兩端對齊顯示（文字內(nèi)容要超過一行）。
但是光使用它依然沒什么卵用…..
要使文字兩端對齊，我們還得使用一個行內(nèi)空標簽來助陣，比如、等等，這里是我用標簽
這世間唯有夢想和好姑娘不可辜負！
給這個i標簽設(shè)置如下樣式
div i{
display:inline-block;
/*padding-left: 100%;*/
width:100%;
}
padding-left: 100%和width:100%都可以達到效果，選用其一即可。效果如下
但是加入HTML元素又違反了結(jié)構(gòu)表現(xiàn)分離的原則，我們可以改用after、before偽元素：
div:after {
content: " ";
display: inline-block;
width: 100%;
}
感謝 @依韻_宵音 的提醒
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116611.html
摘要：中當(dāng)屬性被賦值為時屬性經(jīng)常被用來和屬性一起設(shè)置文本兩端對齊的方式。 CSS中,當(dāng)text-align屬性被賦值為justify時,text-justify屬性經(jīng)常被用來和text-align屬性一起設(shè)置文本兩端對齊的方式。 p { text-align: justify; text-justify: inter-word; } Values inter-word: 表示當(dāng)前文...
摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優(yōu)雅，不需要寫冗長的代碼來校驗設(shè)置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...
摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優(yōu)雅，不需要寫冗長的代碼來校驗設(shè)置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...
閱讀 1639·2021-10-14 09:43
閱讀 5577·2021-09-07 10:21
閱讀 1292·2019-08-30 15:56
閱讀 2139·2019-08-30 15:53
閱讀 1245·2019-08-30 15:44
閱讀 2022·2019-08-30 15:44
閱讀 1333·2019-08-29 17:24
閱讀 764·2019-08-29 15:19
