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是一种超文本标 ...
随机推荐
- Android bitmap图片处理
一.View转换为Bitmap 在Android中所有的控件都是View的直接子类或者间接子类,通过它们可以组成丰富的UI界面.在窗口显示的时候Android会把这些控件都加载到内存中 ...
- LINUX 中的 TCP/IP协议 参数详解
Ipsysctl tutorial 1.0.4 Prev Chapter 3. IPv4 variable reference Next https://www.frozentux.net/ipsys ...
- Markdown写接口文档，自动添加TOC
上回说到,用Impress.js代替PPT来做项目展示.这回换Markdown来做接口文档好了.(不敢说代替Word,只能说个人感觉更为方便)当然,还要辅之以Git,来方便版本管理. Markdown ...
- Bash远程文件传输命令scp
备份远程文件(远程——>本地) scp -r 远程用户名@ip:文件绝对路径 本地绝对路径 还原远程文件(本地——>远程) scp -r 本地路径 远程用户名@ip:远程绝对路径 如果SS ...
- CakePHP之请求与响应对象
请求与响应对象 请求与响应对象在 CakePHP 2.0 是新增加的.在之前的版本中,这两个对象是由数组表示的,而相关的方法是分散在RequestHandlerComponent,Router,Dis ...
- 本地tomcat访问mysql数据库
虽然以前经常听人说起过tomcat,但是今天头一次使用tomcat. 1.Tomcat的安装过程: 首先应该从Apache官方网站上下载是用于Windows的.zip压缩包. 下面是相应的下载链接: ...
- Java反射学习（java reflect）(一)
具有能够分析类能力的程序被称为反射,使用反射库可以编写能够动态操纵Java代码的程序. 一.开始 背景:Java运行时系统始终对所有对象维护一个被称为Runtime的类型标识,然后这货save着每个对 ...
- Error Creating Deployment 有关Tomcat配置问题
配置Tomcat的时候出现提示框The selected server is enabled,but is not configured properly.Deployment to it will ...
- 内容替换Filter
有时候需要对网站进行控制,防止输出非法内容或者敏感信息.这时我们可以使用filter来进行内容替换,其工作原理为,在Servlet将内容输出到response时,response将内容缓存起来,在Fi ...
- 使用BeanUtils组件
使用BeanUtils组件 前提 1:导入commons-beanutils-1.8.3.jar //根据 本人使用的是1.8.3的版本 2:导入日志包 //就是loggin ...