input 標籤左對齊

時間 2019-11-30

標籤 input 標籤對齊简体版

原文原文鏈接

不要忘記下載jquery包，並引用到工程文件裏。javascript

<!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">
      &nbsp;&nbsp;
      <input class="btn" type="submit" id="registerSubmit"  name="registerSubmit"  value="提交" />
    </form>
  </div>
</div>
<!--form End-->
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。