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">
<input class="btn" type="submit" id="registerSubmit" name="registerSubmit" value="提交" />
</form>
</div>
</div>
<!--form End-->
</body>
</html>
input 标签左对齐的更多相关文章
- 控制label标签的宽度,不让它换行 label标签左对齐
1==>控制label标签的宽度.解决字段名太长时,不会换行显示 label-width="100px" label标签的宽度是100px; style="widt ...
- 关于input标签无法对齐的解决方法！
在布局中发现各个input之间很难对齐,解决方法如下: 将input设置vertical-align属性: vertical-align:middle vertical-align:top verti ...
- LI 标签中让文章标题左对齐，日期右对齐的方法
希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html ...
- css实现一行文字居中，多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
- 全面剖析 <input> 标签 ------ HTML\HTML5
<input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...
- iOS上让按钮文本左对齐问题
一,问题分析 1.在做历史记录视图的时候,由于让键盘退出后才能触发表格的 didselect 那个代理方法,也就是得点两下才触发,而表格中的按钮点一下就可以立即响应. 2.于是我就有了用按钮事件代替 ...
- UICollectionView左对齐流水布局、右对齐流水布局
在平时使用的app中会经常碰到一些规格选择,筛选,标签等页面,这些页面的布局展示通常是左对齐流水布局.实现类似这样的左对齐流水布局有多种方式,如果选项少的话可以直接用UIButton实现.现在我们有一 ...
- css 表单标签两端对齐
来自:http://demo.doyoe.com/css3/justify/justify-form.htm 侵删 <!DOCTYPE html> <html lang=" ...
- HTML简单登录和注册页面及input标签诠释
今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标 ...
随机推荐
- uva 11440 - Help Tomisu(欧拉功能)
题目链接:uva 11440 - Help Tomisu 题目大意:给定n和m,求从2~n.中的数x.要求x的质因子均大于m.问说x有多少个.答案模上1e9+7. 解题思路: (1)n!=k∗m!(n ...
- android 50 进程优先级
程序在磁盘叫程序,程序加载到内存运行起来叫进程,优先级5个级别,内存不足的时候会杀掉低级别进程. Active Process:最上面用户可以操作的. Visible Process:可见进程,部分可 ...
- android 29 ArrarAdapter数组适配器
package com.sxt.day05_03; import android.os.Bundle; import android.app.Activity; import android.view ...
- 关于Sublime Text3 pyV8无法加载的问题
昨天切换到sublime text 3 安装 emmet插件 不起作用 提示 pyv8 无法加载 手动下载安装解决 问题描述 PyV8 Binaries Archive of pre-compi ...
- codevs 3119 高精度练习之大整数开根 (各种高精+压位)
/* codevs 3119 高精度练习之大整数开根 (各种高精+压位) 二分答案 然后高精判重 打了一个多小时..... 最后还超时了...压位就好了 测试点#1.in 结果:AC 内存使用量: 2 ...
- PL/SQL Select into 异常处理
在使用select into 为变量赋值时,如果变量是集合类型,不会产生异常,而如果是基本类型或记录类型,则会报异常. 异常产生了怎么办?当然是捕获并处理啦. 对于普通的代码块来说,在代码块的结尾处理 ...
- WebForm开发常用代码
1.获取服务器绝对路径: public static string GetMapPath(string strPath) { if (HttpContext.Current != null) { re ...
- SpringSecurity 在MVC 中的简单使用（翻译的，稍加改动）
Spring Security允许开发人员轻松地将安全功能集成到J2EE Web应用程序中,它通过Servlet过滤器实现“用户自定义”安全检查. 在本教程中,我们将向您展示如何在Spring MVC ...
- asp.net利用ajax和jquery-ui实现进度条
前台用ajax不停进行查询,直到任务完成.进度条用的是jquery-ui.后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中. 代码作为简单示例,实际应用时应对 ...
- jetty运行maven程序（修改及时生效，不需要重启jetty程序）
jetty:run -Djetty:port=9999