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

Posted 2023-03-15

【中文标题】如何在搜索框中对齐搜索图标[重复]

【英文标题】：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，然后像使用文本框一样对其进行样式设置，在其中添加图像并在其旁边添加文本框？

【参考方案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标签