相信有的有輕微強迫癥的產(chǎn)品需求人員會提出讓文字兩端對齊的需求兜蠕,比如說從上面的樣子變成下面的樣子
效果圖.jpg
這時我們需要css中的text-align: justify链烈;但是它不處理塊內(nèi)的最后一行,所以塊內(nèi)不能只有一個元素呜袁,所以我們可以在塊內(nèi)加入元素
<div>
姓名<i></i>
</div>
<div>
受訪人<i></i>
</div>
<div>
聯(lián)系電話<i></i>
</div>
然后設(shè)置css
div{
width:100px;
text-align: justify;
}
div i{
display:inline-block;
/*padding-left: 100%;*/
width:100%;/*padding-left和width二選一即可*/
}
但是在谷歌馍忽,IE和火狐運行之后發(fā)現(xiàn)型宝,IE上不生效,容器標(biāo)簽需要改成這樣
div{
width:100px;
text-align: justify;
text-justify:inter-ideograph;
}