如何在搜索栏左侧放置图标（非背景）？HTML/CSS布局求助

正确的HTML结构调整 #

把放大镜图标和输入框放在同一个父容器内，确保二者属于同一块区域，示例结构如下：

<div class="search-container">
  <!-- 这里用SVG图标示例，你也可以替换成img标签引入图标 -->
  <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
  <input type="text" class="search-input" placeholder="Поиск режима">
</div>

CSS布局方案（两种可选） #

方案1：Flex布局（推荐） #

通过flex实现图标与输入框横向排列，输入框自动占满剩余空间：

.search-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  width: 300px; /* 可根据需求调整宽度 */
}

.search-icon {
  width: 18px;
  height: 18px;
  color: #666;
  margin-right: 8px; /* 控制图标与输入文本的间距 */
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
}

方案2：相对定位+内边距 #

给输入框设置左侧内边距，将图标定位在预留的空间内：

.search-container {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  width: 300px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中图标 */
  width: 18px;
  height: 18px;
  color: #666;
}

.search-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  padding-left: 32px; /* 给图标留出足够空间，避免文本重叠 */
}

问题根源说明 #

你之前用transform定位时，没有给输入框的文本区域预留左侧空间，导致输入文本直接和图标重叠。上面两种方案要么通过flex的间距分隔元素，要么给输入框添加左内边距把文本挤到图标右侧，从布局逻辑上避免了重叠问题。

内容的提问来源于stack exchange，提问作者RoDeZ