如何将results div定位在搜索输入框下方并与输入框同宽？

嘿，我来帮你搞定这个问题！要让.results容器刚好落在搜索输入框下方，并且宽度完全和输入框对齐，咱们可以通过CSS的定位和布局属性来实现，下面是具体的步骤和代码示例：

核心思路 #

1. 给父容器.search-wrapper设置相对定位，作为子元素绝对定位的参照基准
2. 对.results使用绝对定位，让它紧贴输入框底部
3. 统一盒模型规则，确保宽度计算不会出现偏差

完整代码实现 #

HTML（保留你的原有结构） #

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <span>
      <input type="search" class="search-query" placeholder="Search">
    </span>
    <span>
      <input type="submit" value="search" class="search">
    </span>
    <div class="results">
      <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
      </ul>
    </div>
  </div>
</form>

CSS 样式 #

/* 统一全局盒模型，避免padding/border额外增加宽度 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 父容器设置相对定位，作为子元素绝对定位的参照 */
.search-wrapper {
  position: relative;
  display: flex; /* 让输入框和按钮并排，输入框自动占满剩余空间 */
  width: fit-content; /* 父容器宽度适配内容，避免过度拉伸 */
}

/* 搜索输入框设置flex:1，占据父容器剩余宽度 */
.search-query {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

/* 搜索按钮基础样式 */
.search {
  padding: 8px 16px;
  border: 1px solid #007bff;
  background-color: #007bff;
  color: white;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

/* 结果容器定位与样式 */
.results {
  position: absolute;
  top: 100%; /* 紧贴父容器底部，也就是输入框的正下方 */
  left: 0;
  width: 100%; /* 和父容器宽度完全一致，间接匹配输入框宽度 */
  margin-top: 4px; /* 可选：和输入框之间留一点间距，更美观 */
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 100; /* 确保结果框不会被其他页面元素遮挡 */
}

.results ul {
  list-style: none;
}

.results li {
  padding: 8px 12px;
  cursor: pointer;
}

.results li:hover {
  background-color: #f5f5f5;
}

关键细节说明 #

• box-sizing: border-box：这是确保宽度匹配的核心，它让元素的padding和border不会额外增加宽度，设置width:100%时能完全对齐输入框的可视宽度
• .search-wrapper的display:flex：让输入框和按钮自然并排，输入框通过flex:1自动占满剩余空间，父容器宽度由输入框+按钮的总宽度决定
• .results的position:absolute + top:100%：精准定位在父容器的正下方，刚好落在输入框底部的位置
• z-index:100：避免结果框被页面其他元素覆盖，保证搜索结果始终可见

这样设置后，你的.results容器就会完美对齐输入框的下方，并且宽度完全一致啦！

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