如何用CSS对齐输入框、标签与按钮？（React+Tailwind场景）

完全可行，Grid布局天生就适合解决这类元素高度对齐的问题，核心原理是网格轨道会自动统一所有网格项的尺寸，让同一行内的元素高度强制一致。

核心思路 #

把表单的输入框、按钮等元素放入Grid容器，通过定义网格列布局，Grid会自动让每个网格项的高度匹配当前行的最高元素——无需手动设置固定高度，就能实现所有元素等高对齐。

原生CSS+HTML示例 #

<form class="form-grid">
  <input type="text" placeholder="请输入内容">
  <button type="submit">提交</button>
</form>

<style>
.form-grid {
  display: grid;
  /* 输入框占满剩余空间，按钮根据内容自适应宽度 */
  grid-template-columns: 1fr auto;
  /* 元素间添加间距 */
  gap: 0.5rem;
}

/* 统一元素盒模型，避免内边距/边框撑开高度 */
input, button {
  padding: 0.625rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  box-sizing: border-box;
}

button {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
  cursor: pointer;
}
</style>

为什么Grid是合适的选择 #

• Grid默认行为就是让网格项在轨道内拉伸对齐，无需额外配置（Flex也能实现，但需要依赖align-items: stretch的默认规则，Grid的逻辑更直接）；
• 列布局定义更直观，1fr auto的写法可以快速实现“输入框占满空间，按钮自适应”的需求；
• 盒模型设置box-sizing: border-box是关键，确保内边距和边框不会改变元素的总高度，让Grid的高度计算更准确。

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