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/.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: %;

            top: %;

            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">

                -12位之间，请用英文小写、数字，不能全部是数字。</li>

        </ul>

        <hr />

        <ul>

            <li>设置安全信息 </li>

            <li>设置登录密码：

                <input type="text">

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

            </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: ;

    padding: ;

    text-align: center

}

.mainMin {

    width: 1000px;

    margin:  auto;

    position: relative;

}

.registeredStep {

    margin: 20px ;

    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: ;

}

.registeredStep li.two {

 *z-index: ;

}

.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: ;

    overflow: hidden;

    visibility: hidden;

}

.registeredStep li i {

    display: inline-block;

    position: absolute;

    overflow: hidden;

    background: url(images/icon.png) no-repeat;

}

.forminfo {

    margin:  auto;

    width: 600px;

    height: auto;

    border: 1px solid #F00;

}

.clearfix:after {

    content: '\20';

    display: block;

    height: ;

    clear: both;

}

.clearfix {

    zoom: ;

}

.form {

    padding: 20px  60px 30px;

}

.form dl {

    position: relative;

    padding: 10px 40px;

}

.form dl.pact {

    padding: ;

}

.form dl.pact dd {

    line-height: 14px;

}

.form dt {

    float: left;

    display: inline;

    width: 120px;

    line-height: 34px;

    color: #;

    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: +;

    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=/>

          </div>

        </dt>

      </dl>

      <dl class="clearfix">

        <dt>公司全称：</dt>

        <dd>

          <input class="text short" id="validateCode" name="validateCode" tabindex="" 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="" 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=/>

        </div>

        </dt>

      </dl>

      <dl class="clearfix">

        <dt>联系人：</dt>

        <dd>

          <input class="text short" id="validateCode" name="validateCode" tabindex="" 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="" 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="" 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="" 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="" 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">

      &nbsp;&nbsp;

      <input class="btn" type="submit" id="registerSubmit"  name="registerSubmit"  value="提交" />

    </form>

  </div>

</div>

<!--form End-->

</body>

</html>

巴特西

input 标签左对齐

最新文章

热门文章