表单label两端对齐之css实现

23次阅读

共计 1114 个字符,预计需要花费 3 分钟才能阅读完成。

主要属性:
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;
}
注意:
英文字符和数字不会两端对齐

正文完
 0