当前位置:秋叶网络博客 前端编程 ◊ CSS文字两端绝对对齐

CSS文字两端绝对对齐

作者:秋叶 发表时间:2016年1月25日

什么叫两端对齐?演示一下:

:

你们

:

我们

:

我和你们

:

你们和我去哪

:

去你家吃饭

:

常见于一些列表属性,文字对齐让人抓狂,常用空格符填充,或者是拉伸letter-spacing,然而这个可以完美解决对齐问题。
代码见下:

<div class='qiuye_justify'>
<div><div>作</div>:</div>
<div><div>工作</div>:</div>
<div><div>月薪</div>:</div>
<div><div>感情状况</div>:</div>
<div><div>什么时候结婚</div>:</div>
<div><div>准备买房吗</div>:</div>
</div>
<style>
.qiuye_justify > div {overflow:hidden;line-height:42px;}
.qiuye_justify > div > div {
border:1px solid #ddd;
margin:5px;
float:left;
width:100px;
height:30px;
line-height:30px;
overflow:hidden;
padding-right:20px;
text-align:justify;
text-justify: distribute-all-lines;/*ie6-8*/
text-align-last:justify;/*ie9*/
-moz-text-align-last:justify;
-webkit-text-align-last:justify;
letter-spacing:-.3em;
position:relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 0){
.qiuye_justify > div> div:after {
    content: ".";
    display: inline-block;
    width: 100%;
    height: 0;
    overflow: hidden;
}
}
</style>
转载请保留链接:CSS文字两端绝对对齐 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/426.html
目录: 前端编程 | 标签: | 5408次阅读