流体表单元格 div 中的额外空格答案

【问题标题】：Extra whitespace in fluid table cell div流体表单元格 div 中的额外空格
【发布时间】：2012-07-27 04:38:31
【问题描述】：

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

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

这是我看到的

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

【问题讨论】：

你在用什么浏览器看到这个空间，因为我的小提琴看起来不错
火狐 9.01。接受的答案的小提琴工作正常。
不正确，你只需要在inputHolder上指定垂直对齐，在我的更新中

标签： css layout mobile html

【解决方案1】：

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

【讨论】：

【解决方案2】：

输入 div 的 padding-right 为 20px

所以

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

【讨论】：

没关系。把它拿出来，它仍然做同样的事情。问题是空格挂在图标的底部
那是什么浏览器，因为这里jsfiddle.net/WbhgA/13没有空格