本篇文章给大家带来的内容是关于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;

 

　　}