CSS文字两端绝对对齐

作者：秋了秋发表时间：2016年01月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>

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/426.html

目录: 前端编程标签: 文字对齐 6795次阅读