Rumah > hujung hadapan web > html tutorial > CSS控制HTML中元素的对齐问题_html/css_WEB-ITnose

CSS控制HTML中元素的对齐问题_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:50:00
asal
1146 orang telah melayarinya

写的一个注册界面如下:


属性设置的是居中,现在想让红色的提示语出现在输入框的下面,并且与输入框左对齐,要怎么实现?我的HTML代码如下:
<form action="registPro" method="post" id="regist">   <div>       <input type="text" id="name" name="user.username" placeholder="用户名">                         </div>       <span id="msg01" class="msg"></span>   <div>       <input type="password" id="pass" name="user.pass" placeholder="设置密码">         </div>       <span id="msg02" class="msg"></span>   <div>      <input type="submit" id="submit" value="注  册" class="button"/>   </div>                  	  	     		      		     	  		
Salin selepas log masuk


CSS属性设置如下:
<style type="text/css"> input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{text-align:center;line-height:60px;}                    .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>
Salin selepas log masuk


请问该如何实现我想要的功能??


回复讨论(解决方案)

 .msg{color:red; font-size:1pt; text-align:center; display:block;}
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

 .msg{color:red; font-size:1pt; text-align:center; display:block;}
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk



你说的这样是让居中,我想的是让红色的提示语和输入框是左对齐的


 .msg{color:red; font-size:1pt; text-align:center; display:block;}
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk



你说的这样是让居中,我想的是让红色的提示语和输入框是左对齐的



 .msg{color:red; font-size:1pt;display:block;width:280px;margin:0 auto;}
Salin selepas log masuk

<div class="cen"><form action="registPro" method="post" id="regist">   <div>       <input type="text" id="name" name="user.username" placeholder="用户名">                         </div>       <span id="msg01" class="msg">ssssss</span>   <div>       <input type="password" id="pass" name="user.pass" placeholder="设置密码">         </div>       <span id="msg02" class="msg">ssss</span>   <div class="tc">      <input type="submit" id="submit" value="注  册" class="button"/>   </div> </form></div>  <style type="text/css">    .tc{text-align:center;}    .cen{text-align:center;margin:0 auto;width:300px;}    .cen form{text-align:left;} input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{line-height:30px;}                    .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>
Salin selepas log masuk

把文本框和提示框在一个父级div中,在这个父级div中设置css样式text-aline:left

如果是自己练手可以这样写,公司项目的话,可以用验证框架,很方便

参照Jquery validate







----》

改成








要一样 就要在一起

<style type="text/css">*{margin:0px;padding:0px;} form{width:282px;margin:auto;} input{width:280px;height:30px} .msg{color:red; font-size:15px;} div{line-height:60px;}                    .button{margin-left:16px;background-color:OrangeRed;width:250px;height:30px;border:0;}</style>
Salin selepas log masuk


你可以给form设置width,很轻松解决问题,把这些东西都当成块来看,布局很简单
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan