News新闻

业界新闻动态、技术前沿
Who are we?

您的位置:首页      网站建设知识      CSS深入之label与input对齐!

CSS深入之label与input对齐!

发布日期:2014-02-19 00:00:00 2118

我想很多人都会碰到label与input 对齐的问题。

这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼。

参考各大门户网站的前端源码。 得一方法,以记录之:

html确实很简单:

 

[javascript] css如下:

 

 

css" style="font-family: Consolas, 'Courier New', Courier, mono, serif; background-color: rgb(231, 229, 220); width: 693px; overflow: auto; padding-top: 1px; color: rgb(54, 46, 43); line-height: 26px; margin: 18px 0px !important;">
[css] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. label{  
  2.     display: inline-block;  
  3.     padding0 10px;  
  4.     vertical-alignmiddle;  
  5. }  
  6. input{  
  7.     outlinenone;  
  8.     border1px solid rgb(216216216);  
  9.     padding2px 10px 2px 10px;  
  10. }  
  11. input[type="text"]{  
  12.     height14px;  
  13.     line-height14px;  
  14.     border-radius: 5px;  
  15.     padding:10px 10px;  
  16.     vertical-alignmiddle;  
  17.     color:#666;  
  18. }  
  19. input[type="button"]{  
  20.     padding0px 10px;  
  21.     height:40px;  
  22. }  

 

[css] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. .login-box p{  
  2.     vertical-align:middle;  
  3.     padding:10px 10px;  
  4. }  

 

 

那么这里最主要的问题就是
input中采用了paddng的方式。

用padding将input撑开,那么这时候input的高度就只有14px;然后再设置line-height为14px;

再加上vertical-align垂直居中,就能将input中的文字垂直居中。

需要将input与label垂直对齐,只需要将他们的父节点的vertical-align设置为middel.

再将height与line-height的高度设置为一致,当然必须要比input的实际高度高或者是相等

这里说的是实际高度

这里记录一下CSS盒子模型的高度问题: