Question

请看看我的小提琴。我试图在32x32图标旁边有一个输入字段。由于某种原因，我的div的底部悬挂着白色空间。 div和image都应该是32x32px我很怀疑它是我的浏览器但是我无法弄明白：

这就是我所看到的

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

Answer 1

输入div上有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;
}

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

流体表格单元格中的额外空格

2 个答案: