input 标签左对齐
不要忘记下载jquery包，并引用到工程文件里。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <title>注册页面</title> <script type="text/javascript"> $(document).ready(function () { $("ul li:first-child").addClass("lifirst"); $("ul li:only-child").css("text-align", "center"); }); </script> <style type="text/css"> body { background-image: url(/practice/0105.gif); } .lifirst { text-align: left; font-size: 18px; font-weight: bold; } ul li { height: 45px; line-height: 45px; list-style-type: none; text-align:left; } .aa { float: right; } .box { position: absolute; width: 800px; height: 500px; left: 50%; top: 50%; margin-left: -400px; margin-top: -250px; text-align: center; border: outset; border-color: #FFFFFF; background-color: #FBF5E6; } </style> </head> <body> <div class="aa"> <a href="1.html">返回登陆首页</a> </div> <div class="box"> <hr /> <ul> <li>选择账号名称 </li> <li><p style="margin-left:65px; display:inline;">账号：</p> <input type="text"> 6-12位之间，请用英文小写、数字，不能全部是数字。</li> </ul> <hr /> <ul> <li>设置安全信息 </li> <li>设置登录密码： <input type="text"> 6-12位字符（字母、数字） </li> <li>再次输入密码： <input type="text"> 请保证与第一次输入的密码一致。 </li> </ul> <hr /> <ul> <li>填写验证码 </li> <li><p style="margin-left:50px; display:inline;">验证码：</p> <input type="text"> </li> </ul> <ul> <li> <input type="submit" value="提交" size="15"> </li> </ul> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>用户注册1</title> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; text-align: center } .mainMin { width: 1000px; margin: 0 auto; position: relative; } .registeredStep { margin: 20px 0; background: #fff; overflow: hidden; } .registeredStep li { float: left; width: 270px; padding-left: 30px; height: 40px; line-height: 40px; font-size: 18px; position: relative; } .registeredStep li.one { *z-index: 2; } .registeredStep li.two { *z-index: 1; } .registeredStep li.two, .registeredStep li.three { width: 275px; padding-left: 40px; } .registeredStep li em { padding-right: 10px; font-family: tahoma; font-size: 19px; } .registeredStep li.active { color: #fff; background: #58a4ed; } .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; } .registeredStep li i { display: inline-block; position: absolute; overflow: hidden; background: url(images/icon.png) no-repeat; } .forminfo { margin: 0 auto; width: 600px; height: auto; border: 1px solid #F00; } .clearfix:after { content: '\20'; display: block; height: 0; clear: both; } .clearfix { zoom: 1; } .form { padding: 20px 0 60px 30px; } .form dl { position: relative; padding: 10px 40px; } .form dl.pact { padding: 0; } .form dl.pact dd { line-height: 14px; } .form dt { float: left; display: inline; width: 120px; line-height: 34px; color: #333; text-align: right; } .form dt.short { width: 80px; } .form dd { float: left; display: inline; line-height: 26px; margin-left:20px; } .form dd.phone { line-height: 34px; } .form .text, .form .password { width: 240px; height: 18px; padding: 8px 10px; border: 1px solid #c1c1c1; line-height: 18px; font-size: 12px; color: #4d4d4d; vertical-align: middle; outline: none; font-family: "微软雅黑"; } .form .text.short { width: 250px; } .form .text.red { border-color: #f00; } .form .btn { width: 60px; height: 36px; border: none; line-height: 36px; border-radius: 3px; background: #f50; text-align: center; font-size: 16px; font-weight: bold; color: #fff; cursor: pointer; } .form a { color: #3a83e8; } .font { float: left; size: +2; font-weight: bold; } .center{ padding-top:7px; padding-left:5px; } </style> </head> <body> <!--loginHead Star --> <div class="mainMin"> <!--registeredStep Star --> <div class="registeredStep"> <ul class="clearfix"> <li class="one"> <i class="icon"></i><span>账号注册</span> </li> <li class="two active"> <i class="icon"></i><span>填写基本信息</span></li> <li class="three"><span>注册</span> </li> </ul> </div> </div> <!--registeredStep End --> <!-- form start--> <div class="forminfo"> <div class="form"> <form id="registerForm" class="formone"> <dl class="clearfix"> <dt> <div class="font"> 基本信息 </div> <div class="center"> <hr style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#eee,strength=10)" width="400px" color=#987cb9 SIZE=1/> </div> </dt> </dl> <dl class="clearfix"> <dt>公司全称：</dt> <dd> <input class="text short" id="validateCode" name="validateCode" tabindex="3" type="text"> <div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div> </dd> </dl> <dl class="clearfix"> <dt>所在地区：</dt> <dd> <select name="choose" id="choose"> <option value="#" selected="selected">省份</option> <option value="浙江省">浙江省</option> <option value="云南省">云南省</option> <option value="山西省">山西省</option> </select> </dd> <dd> <select name="choose" id="choose"> <option value="#" selected="selected">城市</option> <option value="义乌">义乌</option> <option value="杭州">杭州</option> <option value="云南">云南</option> </select> </dd> <dd> <select name="choose" id="choose"> <option value="#" selected="selected">区块</option> <option value="滨江区">滨江区</option> <option value="上城区">上城区</option> <option value="浦沿区">浦沿区</option> </select> </dd> </dl> <dl class="clearfix"> <dt>公司详细地址：</dt> <dd> <input class="text short" id="validateCode" name="validateCode" tabindex="3" type="text"> <div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div> </dd> </dl> <dl class="clearfix"> <dt> <div class="font">基本信息</div> <div class="center"> <hr style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#eee,strength=10)" width="400px" color=#987cb9 SIZE=1/> </div> </dt> </dl> <dl class="clearfix"> <dt>联系人：</dt> <dd> <input class="text short" id="validateCode" name="validateCode" tabindex="3" type="text"> <div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div> </dd> </dl> <dl class="clearfix"> <dt>电子邮件：</dt> <dd> <input class="text short" id="validateCode" name="validateCode" tabindex="3" type="text"> <div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div> </dd> </dl> <dl class="clearfix"> <dt>手机号码：</dt> <dd> <input class="text short" id="validateCode" name="validateCode" tabindex="3" type="text"> <div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div> </dd> </dl> </dl> <dl class="clearfix"> <dt>座机号码：</dt> <dd> <input class="text short" id="validateCode" name="validateCode" tabindex="3" type="text"> <div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div> </dd> </dl> <dl class="clearfix"> <dt>QQ：</dt> <dd> <input class="text short" id="validateCode" name="validateCode" tabindex="3" type="text"> <div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div> </dd> </dl> <input class="btn" id="registerPrevious" name="registerPrevious" value="上一步" type="button"> <input class="btn" type="submit" id="registerSubmit" name="registerSubmit" value="提交" /> </form> </div> </div> <!--form End--> </body> </html>
