css 文字两端对齐

制作封面、表格时,会有这里写图片描述这种标签格式,一般有2~4字不等,需要两边对齐。经测试仅仅text-align: justify; 和 display: inline-block; 没有效果。

效果图IE7(IE8均可以):
这里写图片描述
chrome效果图:
这里写图片描述
html:

<ul class="examined_info">
    <li><span class="examined_label">登 记 号:<span></span></span><span class="examined_text">T005</span></li>
    <li><span class="examined_label">姓&emsp;&emsp;名:<span></span></span><span class="examined_text">左**</span></li>
    <li><span class="examined_label">性&emsp;&emsp;别:<span></span></span><span class="examined_text">左**</span></li>
    <li><span class="examined_label">年&emsp;&emsp;龄:<span></span></span><span class="examined_text">左**</span></li>
    <li><span class="examined_label">身份证号:<span></span></span><span class="examined_text">左**</span></li>
    <li><span class="examined_label">单&emsp;&emsp;位:<span></span></span><span class="examined_text">左**</span></li>
    <li><span class="examined_label">日&emsp;&emsp;期:<span></span></span><span class="examined_text">左**</span></li>
            </ul>

css:

.examined_info li {
    list-style-type: none;
    height: 28px;
}
.examined_text {
    text-decoration: underline;
}
.examined_label {
    text-align: justify;
    display: inline-block;
    width: 80px;
    height: 30px;
    vertical-align: top;
}
.examined_label>span {
    display: inline-block;
    padding-left: 100%;
}

核心代码:

<span class="examined_label">登 记 号:<span></span></span>

需要在外层span中加通用的text-align: justify; 和 display: inline-block;,内层加span,同时要加上如上.examined_label>span 的样式。

另外,只加上这两句,这个label会很高,所以需要加高度以控制和下一行的距离。

附:
在调试中遇到的问题:
1.最开始没有在“登 记 号:”这个几个字中间加空格也没有加&emsp 这类占位符,chrome上有效果:
这里写图片描述
但在IE8上没有效果:
这里写图片描述
2.后来,在无论两个字还是三个字时都加上空格,chrome上效果和上面没有加空格一样,但实际上文字还是不算两端对齐;
而在IE8上却正常了:
这里写图片描述

最后,修改为如上代码,两端对齐和占位符根据字数配合使用。
或者不要把冒号放在label中,应该也可以,这样应是最简洁的方式。

核心解决方案参考:
https://www.cnblogs.com/lzkwin/archive/2012/11/08/2761667.html


版权声明:本文为Dorothy1224原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。