gpt4 book ai didi

html - 在输入文本框的左侧粘贴一个图标

转载 作者:太空宇宙 更新时间:2023-11-04 11:06:41 25 4
gpt4 key购买 nike

我需要你的帮助,

我的问题是我似乎无法让输入框正确地排列在我的图标旁边。它似乎将自己包裹到下一行并且也突破了父 div 边界?

如何让图标正确排列在输入框的左侧。

这里是问题的捕获:

enter image description here

这是期望的结果:

enter image description here

这里是有问题的 HTML 和 CSS 标记:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
.field {
border: 1px solid red;
width: 200px;
}
#fileno {
border: 0;
width: 100%;
}
#icon_search {
background: #FFF;
border: 0;
}

</style>

</head>

<body>

<div class="field">
<div id="icon_search" style="float: left;"><img alt="search" width="16" height="16" src="glass.png"/></div>
<input id="fileno" type="text">
</div>

</body>

</html>

最佳答案

问题是 #filenowidth:100%。字段和图标都没有空间。由于您已经定义了 .fieldimg 的宽度,您还可以以像素为单位定义 #fileno 的宽度:184px [200px - 16px].

而且,从您提供的代码来看,#icon_search 似乎不是必需的,所以我删除了它并将 float: left 放在 .field 上img。如果有其他原因,它应该仍然可以使用 #fileno 中定义的宽度。如果 div 是必需的,请告诉我,我可以把它放回去,但是,基本上是因为 #fileno100%

HTML:

<div class="field">
<img alt="search" width="16" height="16" src="glass.png"/>
<input id="fileno" type="text">
</div>

CSS:

.field {
border: 1px solid red;
width: 200px;
}
#fileno {
width: 184px;
border: 0;
}
.field img {
float: left;
}

这是一个 JSFiddle .

关于html - 在输入文本框的左侧粘贴一个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33922744/

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