React中如何实现按钮与输入框底部边缘对齐？

修改后的代码 #

JSX 部分

<form className='button-container'>
  <input
    variant="outlined"
    className="bankTransSearch"
    placeholder="输入搜索内容"
  />
  <button variant="outlined" className="bankTransSearchButton">Search</button>
</form>

CSS 部分

.button-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end; /* 强制元素底部对齐 */
  gap: 8px; /* 输入框和按钮之间预留间距 */
}

.bankTransSearch {
  flex: 1; /* 输入框自动填充容器剩余空间，替代不合理的width:1% */
  height: 40px; /* 和按钮统一高度 */
  padding: 0 12px; /* 避免输入内容贴边框 */
  border: 1px solid rgba(0,0,0,0.23); /* 匹配outlined样式的边框 */
  border-radius: 4px; /* 和按钮圆角保持一致 */
  box-sizing: border-box; /* 让边框、内边距计入元素总高度 */
}

.bankTransSearchButton {
  background-color: #3f51b5 !important;
  color: white !important;
  width: auto; /* 去掉固定宽度，让按钮自适应内容 */
  height: 40px; /* 和输入框高度统一 */
  padding: 0 24px; /* 调整内边距控制按钮大小 */
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
}

关键修改说明 #

• 给容器加align-items: flex-end，直接让两个元素的底部边缘对齐
• 把输入框的width:1%改成flex:1，解决宽度不合理的问题，让布局更灵活
• 统一输入框和按钮的高度，加上box-sizing: border-box，避免边框、内边距额外撑大元素
• 调整按钮宽度为自适应，通过内边距控制尺寸，解决按钮偏大的问题

如果你用的是 Material UI 组件 #

如果你的输入框和按钮是 Material UI 的TextField和Button，可以更简洁地调整：

import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

<form className='button-container'>
  <TextField
    variant="outlined"
    className="bankTransSearch"
    placeholder="输入搜索内容"
    size="small" /* 统一组件尺寸 */
  />
  <Button
    variant="outlined"
    className="bankTransSearchButton"
    size="small" /* 和输入框尺寸匹配 */
    style={{ backgroundColor: '#3f51b5', color: 'white' }}
  >
    Search
  </Button>
</form>

对应的 CSS：

.button-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.bankTransSearch {
  flex: 1;
}

通过 MUI 自带的size属性快速统一尺寸，配合 flex 对齐就能实现需求。

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