【小技巧】CSS文字兩端對齊
需求如下,紅框所在的文字有四個字的、三個字的、兩個字的,如果不兩端對齊可以選擇居中對齊,或者右對齊。但是如果要像下面這樣兩端對齊呢?
我相信以前很多人都這麼幹過:兩個字中間使用 來隔開達到四個字的寬度,三個字也可以,但是,像上圖中“122賬號”“122密碼”這樣的,就不好計算該用幾個空格了。
假如我們有如下HTML:
這世間唯有夢想和好姑娘不可辜負!
給它加點樣式
div{
width:500px;
border:1px solid red;
text-align: justify;
}
初始效果是這樣的text-align: justify
這是什麼東西?CSS2中text-align
有一個屬性值為justify
,為對齊之意。其實現的效果就是可以讓一行文字兩端對齊顯示(文字內容要超過一行)。
但是光使用它依然沒什麼卵用…..
要使文字兩端對齊,我們還得使用一個行內空標籤來助陣,比如、
等等,這裡是我用
標籤
這世間唯有夢想和好姑娘不可辜負!
給這個 i
標籤設定如下樣式
div i{
display:inline-block;
/*padding-left: 100%;*/
width:100%;
}
padding-left: 100%
和width:100%
都可以達到效果,選用其一即可。效果如下
但是加入HTML元素又違反了結構表現分離的原則,我們可以改用after、before偽元素:
div:after {
content: " ";
display: inline-block;
width: 100%;
}
感謝 SF網友 的提醒
線上檢視:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2041/viewspace-2799433/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- css文字兩端對齊CSS
- css文字兩端對齊效果相容各瀏覽器CSS瀏覽器
- css 表單標籤兩端對齊CSS
- css如何實現中文兩端對齊CSS
- 探索發現:CSS實現中文兩端對齊CSS
- 【CSS】段落文字實現兩端對齊,不滿一行則不需要CSS
- CSS文字水平居中對齊CSS
- CSS文字框與驗證碼垂直對齊CSS
- Powerpoint技巧:快速對齊小數點
- text-align:justify 兩端對齊
- 文字對齊位置
- linux對齊文字Linux
- 中文詞語字數不同時兩端(等寬)對齊的方法小結
- form表單元素名稱兩端對齊代ORM
- text-align: justify兩端對齊佈局
- css居中對齊大全CSS
- canvas textAlign 文字對齊Canvas
- 小技巧!CSS 整塊文字溢位省略特性探究CSS
- 如何讓文字垂直居中對齊文字框
- css小技巧CSS
- CSS讓同一行文字和輸入框對齊CSS
- CAD表格文字對齊方式
- css使用transform垂直對齊CSSORM
- HTML + CSS 小技巧HTMLCSS
- 如何讓文字居右對齊,換行後又居左對齊
- 文字框與文字垂直對齊程式碼例項
- 位元組對齊小談
- 文字如何做到垂直居中對齊
- Bootstrap系列 -- 5. 文字對齊方式boot
- CSS居中對齊終極指南CSS
- 常用的CSS小技巧CSS
- 前端常用CSS小技巧前端CSS
- CSS 行內對齊的黑魔法CSS
- 實現文字標題和input文字框垂直居中對齊
- CSS 小結筆記之解決flex佈局邊框對不齊CSS筆記Flex
- CSS揭祕之《小技巧》CSS
- 圖示文字水平對齊方法總結
- 如何讓input文字框和圖片對齊