我們經常會看到表單填寫時前面的label,都是左右對齊的,即使字數不一樣。就像下面的效果:
解析
這種效果主要通過text-align-last屬性來實現。
- text-align-last:規定如何對齊文本的最後一行
在菜鳥教程上對於這個屬性有這樣的描述:
text-align-last 屬性只有在 text-align 屬性設置爲 "justify" 時才起作用。
但我嘗試了一下,當文本只有一行的時候,text-align屬性不設置,text-align-last也是有用的。當然這只是針對非IE和Safiri而言。
text-align屬性對多行文本的最後一行文本無效。
/*css*/
.label {
width: 200px;
text-align-last: justify;
}
/*html*/
<div class="label">產 品</div>
這樣的寫法,對IE瀏覽器和safari瀏覽器就不起作用了。因爲text-align-last不支持這兩個瀏覽器。
針對這個問題,我們可以用僞類來解決。
/*css*/
.label {
width: 200px;
height: 30px; /*高度需要添加,不然文字下面會多出一些空隙*/
text-align: justify;
}
.label:after{
content: '';
display: inline-block;
width: 100%;
}
/*html*/
<div class="label">產 品</div>
有三點需要注意:
- 因爲加了僞類之後,相當於在標籤的文本後又加了一行,所以text-align-last就不起作用了,需要加上text-align
- 因爲加了僞類之後,文本後面會多出一行,即使給僞類設置高度爲0也不行。所以必須給.label屬性加上一個高度。區別如下:
- 加了僞類之後,標籤的文字之間必須要存在一個空格(一個就行,不用太多),否則的話,沒有效果。
兩種方案對比
第二種方法相對於第一種方法來說,兼容性更好,我在多個瀏覽器測試了一下,都沒有問題。
第一種方案更簡潔,但是不支持ie和safari,所以建議大家還是用第二種方案更省心。