两端对齐用text-align:justify;但怎么解决单行不能两端对齐呢,思路就是:
让浏览器认为这不是最后一行就行了
在元素里面加一个会换行的空的子元素比如:
<i style="display:inline-block;width:100%;height:0;"></i><ul class="arter"> <li><span>作品名称<i></i></span>: 宝贝儿</li> <li><span>作品类型<i></i></span>: 油画</li> <li><span>艺术家<i></i></span>: 张玉瀛</li> <li><span>风格<i></i></span>: 超现实</li> <li><span>材质<i></i></span>: 布面油画</li> <li><span>题材<i></i></span>: 人物</li> <li><span>创作时间<i></i></span>: 2011</li> <li><span>所在位置<i></i></span>: 华东</li> <li><span>尺寸<i></i></span>: 78x78cm</li> </ul>
效果如下:li{font-size:14px;line-height:24px;color:#4a4a4a; span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top; i{display:inline-block;width:100%;height:0;} } }
几点注意事项:
1)span要设置为inline-block;才能和后面的字同行显示,同时设置width才会使<i>换行;
2)必须要设置span元素的height,和overflow:hidden否则<i>还是会占高度;
3)vertical-align:top;可以使,li内的span和后面的字,高度对齐,否则会变成
HTML:<div class="justify">hello, text justify.</div><br/> <div class="justify"> hello, text justify.<span></span></div><br/> <div class="justify">中 文 两 端 对 齐</div><br/> <div class="justify">中 文 两 端 对 齐<span></span></div>样式:
div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px;} div.justify > span { display: inline-block /* Opera */; padding-left: 100%; }