css实现两端对齐

  • 项目中很多时候都需要实现两端对齐。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul>
<li>
<label>应聘者:</label>
<span>那些神奇的歌声在把我召唤</span>
</li>
<li>
<label>招聘者:</label>
<span>这里有与世无争的笑颜;娇艳的花开满山间</span>
</li>
<li>
<label>主要责任人:</label>
<span>彩虹下的歌声笑语中嘹亮</span>
</li>
<li>
<label>事件:</label>
<span>拉起低下头抿嘴笑的姑娘</span>
</li>
<li>
<label>事件彩虹:</label>
<span>编一支花环为她戴在头上</span>
</li>
</ul>

现在的效果是这样的:
html

现在我们要对label里面的文字进行两端对齐

一般我们会这样写,为此我们还做了点兼容:

1
2
3
4
5
6
7
8
9
10
11
label {
min-width: 100px;
max-width: 100px;
display: inline-block;
text-align: justify;
text-justify: inter-ideograph; //IE
text-align-last: justify;
-moz-text-align-last: justify; //firefox
position: relative;
}

这样的效果是这样的:
html

我们需要的是字对齐,现在由于有“:”在显然影响了我们。如果我们去掉“:”,将会是这样的
html

现在这样才算是真正意义上的两端对齐。我们在补上“:”

1
2
3
4
5
label:after {
content: ":";
position: absolute;
display: inline-block
}

我们通过伪元素来补上“:”
html

现在是实现两端对齐了,是不是很方便。

但是通过测试,发现firefox并不行。经原来firefox必须要有空格才行,也就是字与字之间必须有一个空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul>
<li>
<label>应 聘 者</label>
<span>那些神奇的歌声在把我召唤</span>
</li>
<li>
<label>招 聘 者</label>
<span>这里有与世无争的笑颜;娇艳的花开满山间</span>
</li>
<li>
<label>主 要 责 任 人</label>
<span>彩虹下的歌声笑语中嘹亮</span>
</li>
<li>
<label>事 件</label>
<span>拉起低下头抿嘴笑的姑娘</span>
</li>
<li>
<label>事 件 彩 虹 </label>
<span>编一支花环为她戴在头上</span>
</li>
</ul>

IE浏览器的话,目前IE9以下测试后是不支持的。

谢谢你给我的支持,坚持原创技术分享,共同成长