添加CSS类后搜索框与提交按钮错位，需保留格式并对齐

问题概述 #

• 为input添加search类后，搜索框与提交按钮出现错位；移除该类后元素对齐，但丢失自定义样式
• 需要将搜索栏整体右对齐至容器边框处

原代码 #

HTML #

<div class="search">
<input type="text" placeholder="Search.." name="search" class="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>

CSS #

.search {
    padding: 7.5px;
    font-size: 15px;
    border-radius: 4px;
    border: none;
    margin-top: 7px;
    margin-right: 200px;
    float: right;
}

核心问题分析 #

父容器<div>和子元素<input>共用search类，导致input继承了父容器的float: right、外边距等样式，破坏了元素的自然对齐逻辑，引发错位。同时父容器的margin-right:200px阻止了搜索栏贴紧右侧边框。

解决方案 #

1. 修复类名冲突 #

给input单独设置类名（如search-input），避免父子元素样式混淆。

2. 用Flex布局实现对齐与右对齐 #

使用flex布局替代float，轻松实现子元素垂直对齐，同时让搜索栏整体贴紧右侧边框。

3. 统一按钮与输入框样式 #

匹配两者的内边距、圆角，实现一体化视觉效果。

修改后的代码 #

HTML #

<div class="search">
  <input type="text" placeholder="Search.." name="search" class="search-input">
  <button type="submit"><i class="fa fa-search"></i></button>
</div>

CSS #

/* 父容器：整体右对齐，子元素垂直居中 */
.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 7px;
}

/* 搜索框样式 */
.search-input {
  padding: 7.5px;
  font-size: 15px;
  border-radius: 4px 0 0 4px;
  border: none;
  outline: none;
}

/* 提交按钮：与搜索框样式匹配 */
.search button {
  padding: 7.5px 12px;
  font-size: 15px;
  border-radius: 0 4px 4px 0;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

/* 按钮hover效果（可选） */
.search button:hover {
  background-color: #e0e0e0;
}

关键说明 #

• Flex布局的align-items: center确保input和按钮垂直对齐，彻底解决错位问题
• 移除父容器的float: right和margin-right:200px，改用justify-content: flex-end实现搜索栏贴紧右侧边框
• 拆分圆角样式，让输入框和按钮视觉上连为一体，符合预期效果

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