CSS如何实现表单label的两端对齐

本篇文章给大家带来的内容是关于CSS如何实现表单label的两端对齐（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

主要属性：

text-align:justify;

text-align-last:justify;参见https://www.html.cn/book/css/properties/text/text-align-last.htm

最终效果：

4274539972-5c3dc871135e7_articlex.png

代码：

<ulclass="g-formlist">

<li>

<labelclass="mark">姓名</label>

<divclass="write">

<inputtype="text"id="form-name"class="g-text-entry"placeholder="请输入4-10字符"/>

<spanclass="tip"data-initial="请输入4-10字符"></span>

</div>

</li>

<li>

<labelclass="mark">密码</label>

<divclass="write">

<inputtype="text"id="form-psw"class="g-text-entry"placeholder="请输入6-30字符"/>

<spanclass="tip"data-initial="请输入6-30字符"></span>

</div>

</li>

<li>

<labelclass="mark">确认密码</label>

<divclass="write">

<inputtype="text"id="form-repsw"class="g-text-entry"placeholder="请再输入一遍密码"/>

<spanclass="tip"data-initial="请输入6-30字符"></span>

</div>

</li>

<li>

<labelclass="mark">验证码</label>

<divclass="write">

<inputtype="text"id="form-imgcode"class="g-text-entrydisabled"disabled="disabled"placeholder="输入验证码"/>

<spanclass="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;

}