gpt4 book ai didi

html - 删除输入标签和跨度标签之间的间隙

转载 作者:太空宇宙 更新时间:2023-11-03 19:43:28 24 4
gpt4 key购买 nike

你好,

编辑:我遵循了以下评论中提到的建议。然后,它在 IE 中运行良好,但问题仍然存在于 Google 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>

下面是两张图片: ComboBoxArrow_hover ComboBoxArrow_regular

我想开发一个下拉列表框。我正在使用输入字段和 <span>将包含 down arrow icon 的标签获取列表框外观。
问题是输入字段和跨度之间存在不必要的间隙,这真的很难看。可以删除该间隙吗? Here是示例应用程序。这里我用了V用于测试目的,但实际上应该有一个图像。

注意:跨度的高度应该等于输入的标签,如果我们改变浏览器的分辨率,他们的对齐方式不应该被扭曲....

提前致谢

最佳答案

不要在代码中做任何事情。只需删除 HTML 中输入字段和跨度之间的空格。写成 -

<span class="inputBox">
<input type="text"><span class="iconHolder">V</span>
</span>

JSFiddle

编辑:

或者让元素向左浮动——

input, .iconHolder{ float: left; }

.iconHolder{
background:#007DC0 url('arrow.gif') 50% 50% no-repeat;
width:12px;
height:18px;
}

Another Fiddle

关于html - 删除输入标签和跨度标签之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12618857/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com