gpt4 book ai didi

html - 将图像放置在输入框的右侧

转载 作者:行者123 更新时间:2023-12-03 09:25:17 24 4
gpt4 key购买 nike

如何将双向下箭头图像定位在输入框的右侧,并且它还必须是可点击的。

这是我的图片:enter image description here

这是所需结果的图片:enter image description here

HTML 代码:

<!DOCTYPE html>    
<html>
<head></head>
<body>
<input type="text" style="border: 1px solid #000;">
<img src="double_arrow.png" style="width: 19px; height: 18px;">
</body>
</html>

最佳答案

将它们都包裹在相对定位的外容器中。然后将图像设置为绝对位置并锚定到右侧

<div class="combo">
<input type="text">
<img class="trigger">
</div>

.combo { position: relative; }
.combo .trigger { position: absolute; right: 0; top: 1px }

应该有这样的效果

关于html - 将图像放置在输入框的右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22253875/

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