如何实现搜索框左右等宽扩展并调整右侧图标间距？

问题解决要点 #

1. 实现搜索框左右等宽扩展 #

原布局中.help-container的place-content: center会让内部.help元素宽度收缩，导致搜索框无法左右等宽扩展。通过给.help设置max-width限制搜索区域的最大宽度，同时添加width:100%确保小屏幕下占满可用空间，配合padding:0 1rem避免搜索框紧贴屏幕边缘，即可实现搜索框在标题下方居中且左右等宽扩展的效果。

2. 增加右侧图标与边框间距 #

原代码中图标紧贴右侧边框，是因为background-position: right center的定位方式和未针对性设置的内边距。调整.searchTerm的padding-right为足够数值，同时将background-position改为right 10px center，即可让图标与右侧边框保持指定间距。

修改后的完整代码 #

CSS代码 #

.help-container {
  padding: 5rem 0;
  display: grid;
  place-content: center;
  background-color: #dadbf1;
}

.help {
  max-width: 800px; /* 可根据需求调整搜索区域的最大宽度 */
  width: 100%;
  padding: 0 1rem;
  text-align: center;
}

h1 {
  font-size: 5rem;
  font-weight: 500;
  padding-bottom: 2rem;
  margin: 0;
}

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 1px solid #000000;
  padding: 5px 40px 5px 15px; /* 右侧内边距给图标留出空间，左侧优化输入体验 */
  height: 45px;
  border-radius: 0.25rem;
  outline: none;
  color: #9dbfaf;
  font-size: 1rem;
  background-image: url("https://svgur.com/i/qJh.svg");
  background-repeat: no-repeat;
  background-position: right 10px center; /* 图标与右侧边框保持10px间距 */
  background-size: 30px;
}

HTML代码 #

<section>
  <div class="help-container">
    <div class="help">
      <h1>How can we help?</h1>
      <div class="search">
        <input type="text" class="searchTerm" placeholder="Search" />
      </div>
    </div>
  </div>
</section>

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