對一些書寫CSS代碼朋友可能都了解，在平常的開發過程中，對于text-align一般用到的是left,center,right，這三個屬性都不會陌生。然而，對于justify的使用我卻是很陌生。361源碼今天就來說說這個justify用處。
首先有個比較簡單的例子，首先是html代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .demo{ width: 70px; /*text-align: justify;*/ } </style></head><body> <div> <p>飛灑發fd達fasdf省sdf份發f送fdfd大df夫df薩</p> </div></body></html>首先是不使用justify的結果：
然后我們使用justify，結果是：
可以看出每一段都對齊了。那么接下來，我們聯想到這樣的情況，兩個字怎么和四個字對齊：
我們要把這個justify用在表單中，將文本對齊。于是有下面的代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> span{ width: 70px; text-align: justify; } input{ width: 100px; } </style></head><body> <div> <span>昵稱：</span><input type="text" style = 'width: 100px'><br><br> <span>電子郵箱：</span><input type="email" style = 'width: 100px;'> </div></body></html>然而，結果去讓我們非常失望：當text-align:justify使用在單行中，是起不到justify的作用的。那么我們該怎么做呢？
這個問題是我在項目中碰到的，由于我發現這個問題不可行，于是各種   各種用。但是發現在safari中微軟雅黑不識別 等，于是只能找解決辦法。最終在開心網的源代碼中找到了解決辦法。
具體想法是：
首先既然單行不行，那么就用多行。但是怎么用單行呢？——用after。下面是html代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> span{ width: 100px; text-align: justify; float: left; } span:after{ content:'.'; width: 100%; display: inline-block; overflow: hidden; height: 0; } input{ width: 100px; } </style></head><body> <div> <span>昵稱</span>：<input type="text" style = 'width: 100px'><br><br> <span>電子郵箱</span>：<input type="email" style = 'width: 100px;'> </div></body></html>
結果為：
但是需要將span設置為float: left。:after為inline-block。
新聞熱點
疑難解答
