div里面怎么用CSS控制input输入文本框对齐
问题就是这个问题，弄的我好郁闷啊，input文本框对齐不了，不知道怎么弄，百度上面说在input里面运用vertical-align: middle;但是我用了不行啊，实在不知道怎么办了，如果不用CSS控制，用JavaScript怎么来控制啊，学的知识有限，请高手帮帮忙啊，代码如下
- HTML code
<!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"> <title>注册页面</title> <style type="text/css">body { background-image: url(/practice/0105.gif)}.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;}#boxhead1 { text-align: left;}#boxhead2 { text-align: left;}#boxhead3 { text-align: left;}</style> </head> <body> <div class="aa"> <a href="1.html">返回登陆首页</a> </div> <div class="box"> <div id="boxhead1"> <hr> <h3> 选择账号名称 </h3> </div> <br> 账号： <input type="text"> 6-12位之间，请用英文小写、数字，不能全部是数字。 <br> <br> <div id="boxhead2"> <hr> <h3> 设置安全信息 </h3> </div> 设置登录密码： <input type="text"> 6-12位字符（字母、数字） <br> <br> 再次输入密码： <input type="text"> 请保证与第一次输入的密码一致。 <br> <br> <div id="boxhead3"> <hr> <h3> 填写验证码 </h3> </div> <br> 验证码： <input type="text"> <br> <br> <input type="submit" value="提交" size="15"> </div> </body></html>[解决办法]
把 text-align:center去掉。然后在账号和验证码字的后面加空格（ ）对齐。
另左对齐改写成
#boxhead1,
#boxhead2,
#boxhead3{text-align: left;}.
减少重复代码 。或者写个通用样式.tl{text-align: left;}直接在那几个加入
[解决办法]
[解决办法]
楼主既然要用CSS而不太想改成JS来布局，让我帮你微调一下吧。以下是BODY中的内容，复制上去即可实现，希望对你有用：
<body>
<div class="aa">
<a href="1.html">返回登陆首页</a>
</div>
<div class="box">
<div id="boxhead1">
<hr>
<h3>
选择账号名称
</h3>
</div>
<p style="margin-left:80px;">账号：
<input type="text">
6-12位之间，请用英文小写、数字，不能全部是数字。</p>
<br>
<div id="boxhead2">
<hr>
<h3>
设置安全信息
</h3>
</div>
<p style="margin-right:180px;">设置登录密码：
<input type="text">
6-12位字符（字母、数字）</p>
<p style="margin-right:130px;">再次输入密码：
<input type="text">
请保证与第一次输入的密码一致。</p>
<br>
<div id="boxhead3">
<hr>
<h3>
填写验证码
</h3>
</div>
<br>
<p style="margin-left:-330px;">验证码：
<input type="text"></p>
<br>
<input type="submit" value="提交" size="15">
</div>
</body>
[解决办法]
楼主这样的写法有点乱，可以参考以下，不要忘记下载jquery包，并引用到工程文件里。
- HTML code
<!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>