表单label两端对齐之css实现

主要属性:
text-align: justify;
text-align-last: justify; 参见https://www.css88.com/book/css/properties/text/text-align-last.htm
最终效果:

代码:
<ul class=”g-formlist”>
<li>
<label class=”mark”>姓 名</label>
<div class=”write”>
<input type=”text” id=”form-name” class=”g-text-entry” placeholder=”请输入4-10字符” />
<span class=”tip” data-initial=”请输入4-10字符”></span>
</div>
</li>
<li>
<label class=”mark”>密 码</label>
<div class=”write”>
<input type=”text” id=”form-psw” class=”g-text-entry” placeholder=”请输入6-30字符” />
<span class=”tip” data-initial=”请输入6-30字符”></span>
</div>
</li>
<li>
<label class=”mark”>确 认 密 码</label>
<div class=”write”>
<input type=”text” id=”form-repsw” class=”g-text-entry” placeholder=”请再输入一遍密码” />
<span class=”tip” data-initial=”请输入6-30字符”></span>
</div>
</li>
<li>
<label class=”mark”>验 证 码</label>
<div class=”write”>
<input type=”text” id=”form-imgcode” class=”g-text-entry disabled” disabled=”disabled” placeholder=”输入验证码” />
<span class=”tip” data-initial=”请输入验证码”></span>
</div>
</li>
</ul>
li {
clear: both;
list-style: none;
}

.mark {
display: block;
float: left;
overflow: hidden;
width: 78px;
height: 29px;
padding-right: 10px;
text-align: justify;
text-align-last: justify;
line-height: 2;
}
注意:
英文字符和数字不会两端对齐

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理