消除输入和跨度标签之间的间隙
嗨,
编辑:我按照以下评论中提到的建议.然后,它在IE中工作得很好,但问题仍然存在于谷歌Chrome ...有人可以帮助我.... 这是改变后的代码
<!DOCTYPE HTML>
<html>
<head>
<style>
.inputBox{
white-space:nowrap;
font-size:0;
}
.inputBox input{
border:1px solid #9AAABD;
box-shadow:inset 0px 1px 3px #b7c2d0;
float:left;
}
.iconHolder{
background:#fff url('ComboBoxArrow_regular.png') 50% 50% no-repeat;
width:12px;
height:19px;
line-height:12px;
font-size:16px;
float:left;
}
.iconHolder:hover{
background:#007DC0 url('ComboBoxArrow_hover.png') 50% 50% no-repeat;
}
</style>
</head>
<body>
<span class="inputBox">
<input type="text">
<span class="iconHolder"></span>
</span>
</body>
</html>
以下是两张图片:
我想开发一个下拉列表框.我正在使用输入字段和一个<span>标记,它将保持down arrow icon列表框的外观.
问题是输入字段和跨度之间存在不必要的差距,这真的很难看.可以消除这个差距吗？这是示例应用程序.这里我用于V测试目的,但实际上应该有一个图像.
注意:跨度的高度应该等于输入的标签,如果我们改变浏览器的分辨率,他们的对齐不应该失真....
提前致谢
不要在代码中做任何事情.只需删除HTML中输入字段和跨度之间的空格即可.把它写成 -
<span class="inputBox">
<input type="text"><span class="iconHolder">V</span>
</span>
编辑:
或使元素向左浮动 -
input, .iconHolder{ float: left; }
.iconHolder{
background:#007DC0 url('arrow.gif') 50% 50% no-repeat;
width:12px;
height:18px;
}