如何在搜索框中对齐搜索图标[重复]答案

【问题标题】：How to align a search icon inside a search box [duplicate]如何在搜索框中对齐搜索图标[重复]
【发布时间】：2021-11-12 09:24:42
【问题描述】：

我想知道如何在文本框中对齐搜索图标，与 Google 的搜索栏相同

像这样：

这就是我得到的，但是我知道怎么做：

我试图避免使用引导程序或任何库。我想尽可能保持原味。

#search-bar {
  width: 32%;
  color: white;
  border-radius: 24px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: #2d2d2d;
  height: 44px;
}

<form class="search-bar-form">
  <input id="search-bar" type="text" href="#" />
  <img src="https://via.placeholder.com/24" />
</form>

【问题讨论】：

可以将您的样式文本框切换为 div，然后像使用文本框一样对其进行样式设置，在其中添加图像并在其旁边添加文本框？

标签： html css

【解决方案1】：

有几种方法。一种方法是在相对位置父级中使用绝对位置...

body {
  margin: 0;
}

#search-bar {
  width: 32%;
  color: white;
  border-radius: 24px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: #2d2d2d;
  height: 44px;
  position: relative;
  padding-left: 44px;
}

.search-icon {
    position: absolute;
    left: 0;
}

<form class="search-bar-form">
    <input id="search-bar" type="text" href="#" />
    <img src="https://img.icons8.com/material-outlined/50/000000/search.png" class="search-icon" />
</form>

Demo

另一种方法是使用相对位置和负边距。为此，请将 img 放在标记中的输入之前。

#search-bar {
  width: 32%;
  color: white;
  border-radius: 24px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: #2d2d2d;
  height: 44px;
  padding-left: 44px;
}

.search-icon {
  position: relative;
  margin-right: -60px;
  z-index: 1;
  vertical-align: middle;
}

<form class="search-bar-form">
    <img src="https://img.icons8.com/material-outlined/50/000000/search.png" class="search-icon" />
    <input id="search-bar" type="text" href="#" />
</form>

【讨论】：

【解决方案2】：

在搜索栏中添加一些padding-left，以将文本更多地移到右侧。

然后为图像添加一个类并像这样定义它：

.mySearchIconImage {
    position: absolute;
    top: 10px;
    left: 10px;

还将position: relative 添加到表单本身，以确保img 没有位于表单之外。

【讨论】：

【解决方案3】：

您可以将图片作为文本框的背景：

#search-bar {
  width: 32%;
  color: white;
  border-radius: 24px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  background-color: #2d2d2d;
  height: 44px;
  
  background-image: url(https://via.placeholder.com/24);
  background-position: 10px center;
  background-repeat: no-repeat;
  padding-left: 40px;
}

<form class="search-bar-form">
  <input id="search-bar" type="text" value="text goes after the padding" />
</form>

【讨论】：

【解决方案4】：

您可以使用位置：绝对。像这样：

form {
  position: relative;
}

img {
  position: abosolute;
  top: 10px;
  right: 20px;
}

您应该更新顶部和右侧的值。这只是一个例子。

【讨论】：

您需要相对定位 input，并且您不想将绝对位置应用于 all 图像。您应该将 sn-p 复制到此处并进行编辑以显示您的解决方案。
你不想使用 position: absolute 吗？
我明白了。你太棒了。
然后如果你不想使用absolute，我可以帮你。
Div里面可以对齐input和img标签