使用display:flex后提交按钮移位，如何实现按钮与输入框贴合效果？

问题描述 #

想要实现的效果：左侧图标与输入框带有浅灰色边框，提交按钮（Rechercher）与输入框紧密贴合。当前实现中提交按钮未与另外两个元素整合，将其加入Flexbox容器后出现移位问题。

原代码 #

HTML代码

<div class="barre-rechercher">
  <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;"></i>
  <form method="get" action="">
    <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
    <input type="submit" value="Rechercher">
  </form>
</div>

CSS代码

.barre-rechercher {
  display: flex;
  flex-direction: row;
  margin: 35px 0 35px 0;
}

.fa-location-dot {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid red;
  border-radius: 10px 0 0 10px;
  background-color: #F2F2F2;
}

input[type="text"] {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 49px;
  border: 1px solid red;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

form>input[type="submit"] {
  color: white;
  height: 49px;
  border: 1px solid var(--main-color);
  border-radius: 0 15px 15px 0;
  background-color: var(--main-color);
}

调整方案 #

核心是将搜索栏所有元素纳入统一Flex上下文，同时消除默认间距、统一边框样式，实现无缝贴合：

修改后的代码 #

HTML代码

<div class="barre-rechercher">
  <i class="fa-solid fa-location-dot fa-lg"></i>
  <form method="get" action="" class="search-form">
    <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
    <input type="submit" value="Rechercher">
  </form>
</div>

CSS代码

:root {
  --main-color: #0065FC; /* 可根据实际需求替换主色值 */
  --light-gray: #F2F2F2;
}

.barre-rechercher {
  display: flex;
  align-items: center;
  margin: 35px 0;
}

.fa-location-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 49px;
  border: 1px solid var(--light-gray);
  border-right: none; /* 移除右侧边框，与输入框无缝衔接 */
  border-radius: 15px 0 0 15px;
  background-color: var(--light-gray);
  color: #000;
}

.search-form {
  display: flex; /* 让输入框与按钮横向紧密排列 */
  height: 49px;
}

input[type="text"] {
  height: 100%;
  padding: 0 15px;
  border: 1px solid var(--light-gray);
  border-left: none; /* 移除左侧边框，与图标无缝衔接 */
  font-weight: 700;
  font-size: 18px;
  outline: none; /* 去掉默认聚焦边框，可自定义样式 */
}

form>input[type="submit"] {
  height: 100%;
  padding: 0 20px;
  color: white;
  border: none;
  border-radius: 0 15px 15px 0;
  background-color: var(--main-color);
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
}

/* 可选：输入框聚焦时的自定义样式 */
input[type="text"]:focus {
  border-color: var(--main-color);
}

关键调整点 #

• 给form添加display: flex，让输入框与按钮在同一行紧密排列
• 统一所有元素高度为49px，确保垂直对齐无偏移
• 移除图标右侧边框、输入框左侧边框，实现三者无缝衔接
• 消除输入框不必要的display: flex和gap属性，简化布局
• 将调试用的红色边框替换为浅灰色，贴合需求样式
• 给图标设置固定宽度，避免因图标尺寸导致的布局错位

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