流體表格單元格中的額外空格

-1

請看看我的小提琴。我正在嘗試在32x32圖標旁邊有一個輸入字段。出於某種原因，我的div底部有空白區域。這兩個div和形象應該是32x32px我懷疑這是我的瀏覽器，但我無法弄清楚：流體表格單元格中的額外空格

http://jsfiddle.net/WbhgA/1/

這裏是我所看到的

http://i.imgur.com/3C1eN.jpg

來源

2012-07-26 user974896

是什麼瀏覽器，你看到的，因爲空間我的小提琴看起來不錯 – Huangism 2012-07-26 20:32:36

Firefox 9.01。接受的答案小提琴正常工作。 – user974896 2012-07-26 20:38:19

這是不正確的，你只需要指定inputHolder上的垂直對齊，它在我的更新 – Huangism 2012-07-26 20:43:59

試試這個 - http://jsfiddle.net/WbhgA/15/

.inputHolder { 
    height: 32px; 
    margin-right: 60px;    
} 

.inputHolder input { 
    border: 1px solid; 
    border-radius: 6px; 
    width:100%; 
    height: 32px; 
    line-height: 32px; 
} 

.icon { 
    border: 1px solid red; 
    border-radius: 6px; 
    width: 32px; 
    height: 32px; 
    float: right; 
    margin-top: -32px; 
    background: transparent url(http://icons-search.com/img/fasticon/icomic_lnx.zip/icomic_lnx-icons-32X32-web.png-32x32.png); 
}

來源

2012-07-26 20:29:55

你有20像素的對輸入的div

所以

.inputHolder { 
    display:table-cell; 
    width:100%; 
    height:32px; 
}

填充右

小提琴這裏http://jsfiddle.net/WbhgA/13/

更新：哦，那空間

你只需要對齊，垂直

.inputHolder { 
    display:table-cell; 
    width:100%; 
    height:32px; 
    border:1px solid red; 
    vertical-align: middle; 
}

來源

2012-07-26 20:27:58 Huangism

無關緊要。把它拿出來，它仍然做同樣的事情。問題是，空白掛在圖標的底部 – user974896 2012-07-26 20:28:35

那麼什麼瀏覽器，因爲這裏http://jsfiddle.net/WbhgA/13/沒有空間 – Huangism 2012-07-26 20:29:25

流體表格單元格中的額外空格

回答

相關問題