css 表單標籤兩端對齊

abcByme發表於2018-03-27
CSS

來自：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> &#187;
    <a href="http://demo.doyoe.com/" title="Web前端實驗室">Web前端實驗室</a> &#187;
    表單標籤兩端對齊 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">&copy; 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>

 

相關文章