form表单文字垂直居中设计方案

尝试了一天,忽然看到曙光,在各种浏览器下效果差强人意,今后我的form表单的整体格式就这么写了。这个方案的要点就是 height/line-height/float 这三者同时使用。



  

      邮箱格式不正确
     

请输入常用邮箱,通过验证后可用于登录和找回密码


  

  

      用户名过长
     

不超过7个汉字,或14个字节(半角数字、半角字母或下划线),且不能是纯数字


  


css 方案:

body,div,span,p,form,input{
    margin:0;padding:0;
}
form{
   font-size:14px;
}
form div label{
   height:30px;
   line-height:30px;
   float:left;
   
   width:100px;
}
form div input{
   height:28px;
   line-height:28px;
   float:left;
 
   width:200px;
   border:1px solid #666666;
   outline:none;/*去除获得焦点时chrome自动边框*/
}
form div span{
   height:30px;
   line-height:30px;
   float:left;
   
   width:200px;
}
form div p{
    height:30px;
    line-height:30px;
    clear:both;

    margin-left:100px;
}

你可能感兴趣的:(WEB前端)