制作封面、表格时,会有
这种标签格式,一般有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">姓  名:<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">年  龄:<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">单  位:<span></span></span><span class="examined_text">左**</span></li>
<li><span class="examined_label">日  期:<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版权协议,转载请附上原文出处链接和本声明。