国产精品成人VA在线观看,亚洲日韩在线中文字幕综合,亚洲AV电影天堂男人的天堂,久久人人爽人人爽人人av东京热


News新聞

業(yè)界新聞動(dòng)態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁(yè)      網(wǎng)站知識(shí)      CSS深入之label與input對(duì)齊!

CSS深入之label與input對(duì)齊!

標(biāo)簽： 發(fā)布日期：2014-02-19 00:00:00 2710

我想很多人都會(huì)碰到label與input 對(duì)齊的問(wèn)題。

這個(gè)東西本身不難，但是要做到與IE這個(gè)東西兼容確實(shí)有點(diǎn)頭疼。

參考各大門(mén)戶網(wǎng)站的前端源碼。 得一方法，以記錄之：

html確實(shí)很簡(jiǎn)單：

 

[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.     padding: 0 10px;  
  4.     vertical-align: middle;  
  5. }  
  6. input{  
  7.     outline: none;  
  8.     border: 1px solid rgb(216, 216, 216);  
  9.     padding: 2px 10px 2px 10px;  
  10. }  
  11. input[type="text"]{  
  12.     height: 14px;  
  13.     line-height: 14px;  
  14.     border-radius: 5px;  
  15.     padding:10px 10px;  
  16.     vertical-align: middle;  
  17.     color:#666;  
  18. }  
  19. input[type="button"]{  
  20.     padding: 0px 10px;  
  21.     height:40px;  
  22. }  

 

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

 

 

那么這里最主要的問(wèn)題就是
input中采用了paddng的方式。

用padding將input撐開(kāi)，那么這時(shí)候input的高度就只有14px;然后再設(shè)置line-height為14px;

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

需要將input與label垂直對(duì)齊，只需要將他們的父節(jié)點(diǎn)的vertical-align設(shè)置為middel.

再將height與line-height的高度設(shè)置為一致，當(dāng)然必須要比input的實(shí)際高度高或者是相等。

這里說(shuō)的是實(shí)際高度。

這里記錄一下CSS盒子模型的高度問(wèn)題: