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

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

WBOY

Freigeben： 2016-06-24 11:50:00

Original

1162 Leute haben es durchsucht

写的一个注册界面如下：

属性设置的是居中，现在想让红色的提示语出现在输入框的下面，并且与输入框左对齐，要怎么实现？我的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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

回复讨论(解决方案)

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

<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>

Nach dem Login kopieren

把文本框和提示框在一个父级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>

Nach dem Login kopieren

你可以给form设置width，很轻松解决问题，把这些东西都当成块来看，布局很简单