来自：http://demo.doyoe.com/css3/justify/justify-form.htm 侵删
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>表单标签两端对齐效果</title><meta name="description" content="表单项中的标签名两端对齐" /><meta name="keywords" content="css3, html5, justify, text-align-last" /><meta name="author" content="doyoe(飘零雾雨), dooyoe@gmail.com, Doyoe‘s Community" /><meta name="robots" content="all" /><!--[if lte IE 8]><script src="http://developer.doyoe.com/dui/lib/js/html5.js"></script><![endif]--><link href="http://developer.doyoe.com/dui/lib/css/reset-grids-comm-min.css" rel="stylesheet" /><link href="../../skin/layout.css" rel="stylesheet" /><link href="../../skin/demo.css" rel="stylesheet" /><style>.g-btn-submit{overflow:visible;height:31px;padding:3px 20px;border:1px solid #0382AD;border-radius:3px;background-color:#45B5DA;background:-webkit-linear-gradient(#45B5DA,#0382AD);background:linear-gradient(#45B5DA,#0382AD);color:#fff;font-size:14px;}.g-btn-submit:hover{background-color:#4bc4ec;background:-webkit-linear-gradient(#4bc4ec,#0494c5);background:linear-gradient(#4bc4ec,#0494c5);}.g-btn-submit:active{background-color:#45B5DA;background:-webkit-linear-gradient(#0382AD,#45B5DA);background:linear-gradient(#0382AD,#45B5DA);}.g-text-entry{height:17px;padding:5px 5px;border:1px solid #aaa;border-radius:3px;box-shadow:1px 1px 2px rgba(0,0,0,.1) inset;outline:none;background-color:#fff;}.g-text-entry:focus{box-shadow:0 0 3px rgba(0,0,0,.2);}.g-text-entry:disabled{border-color:#aaa;background-color:#efefef;}.g-text-entry.disabled{border-color:#aaa;background-color:#efefef;}.g-formlist li{zoom:1;padding:5px 0;vertical-align:top;}.g-formlist li:after{display:block;clear:both;height:0;visibility:hidden;content:‘‘;}.g-formlist .mark{display:block;float:left;overflow:hidden;width:78px;height:29px;padding-right:10px;text-align:justify;text-align-last:justify;line-height:2;}.g-formlist .mark:after{display:inline-block;overflow:hidden;width:100%;height:0;content:"";}.g-formlist .write{display:table-cell;zoom:1;}.g-formlist .write .tip{display:none;color:#666;font-size:12px;}.g-formlist .write .g-text-entry:focus{border-color:#7ebaed;background-color:#edfefe;}.g-formlist .write .g-text-entry:focus ~ .tip{display:inline;}.g-formlist .write .g-text-entry:focus ~ .tip:after{content:attr(data-initial);}#form{width:400px;margin:20px auto;text-align:left;}#form fieldset{padding:20px;border:1px solid #aaa;border-radius:5px;}#form .act{padding:10px 0 0 88px;}</style></head><body><nav id="nav"> ???<a href="http://blog.doyoe.com/" title="CSS探索之旅 - 飘零雾雨的庄园">CSS探索之旅</a> » ???<a href="http://demo.doyoe.com/" title="Web前端实验室">Web前端实验室</a> » ???表单标签两端对齐 demo</nav><form action="#" method="post" id="form" autocomplete="off"> ???<fieldset> ???????<legend>表单</legend> ???????<ul class="g-formlist"> ???????????<li> ???????????????<label class="mark" for="form-name">姓 名</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" for="form-psw">密 码</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" for="form-repsw">确 认 密 码</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" for="form-imgcode">验 证 码</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> ???????<div class="act"><input type="submit" class="g-btn-submit" value="提交" /></div> ???</fieldset></form><p class="copyright">© Copyright <a href="http://www.doyoe.com/" title="飘雨社区">Doyoe.com</a></p><a id="sources" href="http://blog.doyoe.com/" title="前往 CSS探索之旅">CSS探索之旅</a><!--Google Analytics--><script>var _gaq = _gaq || [];_gaq.push([‘_setAccount‘, ‘UA-3500471-3‘]);_gaq.push([‘_trackPageview‘]);(function() { ???var ga = document.createElement(‘script‘); ga.async = true; ???ga.src = (‘https:‘ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js‘; ???var s = document.getElementsByTagName(‘script‘)[0]; s.parentNode.insertBefore(ga, s);})();</script></body></html>css 表单标签两端对齐
原文地址：https://www.cnblogs.com/Byme/p/8656502.html