使文本框对齐的方法，
来源：互联网 发布：知象科技 龙白滔 编辑：程序博客网 时间：2024/06/03 23:41
要想打开建议创建文件夹为css文件名为54格式为.css
<!DOCTYPE html>
<html><head>
<meta content="text/html"charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/54.css"/>
</head>
<body>
<div id="container">
<form action="#" method="get/post" id="">
<div id="header">
<img src="images/header.PNG" style="width:1300px;height:100px;"/>
</div>
<div id="left-column">
<img src="images/left.PNG" style="width:350px;height:580px;"/>
</div>
<fieldset id="f1">
<legend>第一步:软件下载</legend>
<div id="content_1">
通过软件可直接登录软件，但为了获得更佳操作体验，强烈建议下载并安装软件。<br/>
软件下载地址:
<a href="#">电信</a>
<a href="#">网通</a>
(右键另存为或使用下载工具下载）</br>
</div>
</fieldset>
<br/>
<fieldset id="f2">
<legend>第二步:填写企业信息</legend>
<div id="content_2">
<span><img src="images/57.png"/>企业名称:</span>
<input type="text" id="myinput_1"> <br/>
<span><img src="images/57.png"/>所属行业:</span>
<select id="hang_ye">
<option>请选择...</option>
</select>（系统会根据所属行业配置版本，请认真选择）<br/>
<span><img src="images/57.png"/>所在区域:</span>
<select id="dizhi">
<option>请选择...</option>
</selec>
<select id="dizhi_1">
<option>请选择...</option>
</select>
<select id="dizhi_2">
<option>请选择...</option>
</select>
<input type="text" id="myinput_1"><br/>
<span><img src="images/57.png"/>联系人:</span>
<input type="text" id="myinput_2">
<select id="xingbie">
<option>先生</option>
<option>女士</option>
</select><br/>
<span><img src="images/57.png"/>联系电话:</span>
<input type="text" id="myinput_3"> <br/>
<span><img src="images/57.png"/>验证手机:</span>
<input type="text" id="myinput_4">
<a href="#">获取短信验证码，立即试用</a></br/>
<span><img src="images/57.png"/><img src="images/57.png"/>短信验证码:</span>
<input type="text" id="myinput_1">(如不使用短信验证，需人工审核后开通试用）<br/>
<span><img src="images/57.png"/>QQ:</span>
<input type="text" id="myinput_1">
</div>
</fieldset><br/>
<fieldset id="f3">
<legend>第三步:填写软件登录账号及密码</legend>
<div id="content_3">
<span><img src="images/57.png"/>登录账号:</span>
<input type="text" id="myinput_1">
<input type="button" id="button_1"value="检查账号"/><br/>
<span><img src="images/57.png"/>管理工号:</span>
<input type="text" id="myinput_1">管理工号默认10000，无需再次填写，登录时使用。<br/>
<span><img src="images/57.png"/>管理密码:</span>
<input type="text" id="myinput_1"><br/>
<span><img src="images/57.png"/>再次验证密码:</span>
<input type="text" id="myinput_1"><br/>
</div>
</fieldset>
<input type="submit" value="提交"id="submit_1"/><a href="#"id="fanhui">返回登录</a>
</form>
</div>
</body>
</html>部分
css部分利用span定义span{width:10em;display:inline-block;text-align:right;line-height:30px;}使得文本框完全对齐
#container{width:1300px;height:800px;margin:auto;}
#header{width:1300px;height:100px;float:left;border:white solid 20px;}
#left-column{width:350px;height:580px;float:left;border:white solid 20px;}
#content_1{width:800px;height:70px;float:left;line-height:30px;}
#content_2{width:800px;height:250px;float:left;line-height:30px;}
#content_3{width:800px;height:120px;float:left;line-height:30px;}
#f1{width:700px;}
#f2{width:700px;}
#f3{width:700px;}
span{width:10em;display:inline-block;text-align:right;line-height:30px;}
#content_1 a{padding:10px;width:100px;margin:0;text-decoration:none;}
#button_1{padding:0px;;margin:10px;width:80px;background-color:#0099ff;}
#submit_1{font-size:20;font-weigh:200;width:100px;color:#ffffff;background-color:#0099ff;padding:5px;margin:10px;}
#fanhui{font-size:20;font-weigh:200;width:100px;color:#ffffff;background-color:#0099ff;padding:7px;margin:10px;text-decoration:none;}
- 使文本框对齐的方法，
- 文字或文本框与图片水平对齐的方法
- html中怎么将标签左对齐，而文本框右对齐的方法
- input文本框在实践中遇到的对齐问题
- 关于文本框，表列数据的对齐
- 中文字，文本框，button按钮垂直居中对齐方法
- 中文字，文本框，button按钮垂直居中对齐方法
- 使文本框不可编辑的方法
- 使文本框不可编辑的方法
- JQuery 使文本框获得焦点的方法
- 文本框对象的方法
- 硬盘分区对齐的方法
- 字符串对齐的方法
- 字节对齐的方法
- 文本框和按钮对齐
- 文本框和按钮对齐
- 文本框与按钮对齐
- 如何对齐文本框和旁边的图像按钮
- VBA学习
- 快排的交换算法
- Spring AOP ANNOTATION 不起作用的问题
- NSArchiver (NSCoder : NSObject) <NSObject>
- 最新校招笔试面试六十题
- 使文本框对齐的方法，
- 面试题33 把数组排成最小的数
- NSUnarchiver (NSCoder : NSObject) <NSObject>
- CodeForces 123A 并查集
- 2014年阿里巴巴9月14号笔试题
- 面试题34 丑数
- python库的那些事
- 系统不能从U盘启动
- 如何增加私有mibs
