css - 流体表单元格 div 中的额外空格

Question

请看看我的小提琴。我试图在 32x32 图标旁边有一个输入字段。出于某种原因，我的 div 底部有一个空白区域。div 和图像都应该是 32x32px 我怀疑它是我的浏览器，但我无法弄清楚：

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

这就是我所看到的

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

Answer 1

您在输入 div 上有 20px 的 padding-right

所以

.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;
}

Answer 2

试试这个 - 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);
}