在平常的開發過程中，對於text-align一般用到的是left,center,right，這三個屬性都不會陌生。然而，對於justify的使用我卻是很陌生。首先有個比較簡單的例子。
首先是html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .demo{ width: 70px; /*text-align: justify;*/ } </style> </head> <body> <div class = 'demo'> <p>飛灑發fd達fasdf省sdf份發f送fdfd大df夫df薩</p> </div> </body> </html>
首先是不使用justify的結果：
然后我們使用justify，結果是：
可以看出每一段都對齊了。
那么接下來，我們聯想到這樣的情況：
我們要把這個justify用在表單中，將文本對齊。
於是有下面的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{ width: 70px; text-align: justify; } input{ width: 100px; } </style> </head> <body> <div class="demo"> <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。
下面是代碼：
<!DOCTYPE html> <html lang="en"> <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 class="demo"> <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