如何实现表格内input输入框起始位置统一对齐？

针对表格内输入框因标签长度不一导致起始位置不齐的问题，以下几种方案可以快速解决：

方法一：Flex布局固定标签宽度 #

给每个包含标签和输入框的表格单元格设置Flex布局，同时给标签指定固定宽度，确保输入框统一起始位置：

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 8px;
  text-align: left;
}

/* 核心样式 */
td {
  display: flex;
  align-items: center;
}

td label {
  flex: 0 0 180px; /* 固定标签宽度，可根据需求调整 */
  margin-right: 8px;
}

td input {
  flex: 1; /* 输入框占据剩余空间 */
}

这种方式下，所有标签都会占用相同宽度，输入框自然从同一水平位置开始，同时输入框会自动填充单元格剩余空间。

方法二：CSS Grid布局 #

使用Grid布局将单元格内的标签和输入框分为两列，标签列宽度可自适应最长标签，或设置固定宽度：

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 8px;
  text-align: left;
}

/* 核心样式 */
td {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}

如果希望标签列宽度完全统一，把auto改成固定值（比如180px）即可，效果和Flex方法一致。

方法三：inline-block固定标签宽度 #

如果不想使用现代布局方案，也可以给标签设置inline-block和固定宽度，兼容性更好：

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 8px;
  text-align: left;
}

/* 核心样式 */
td label {
  display: inline-block;
  width: 180px; /* 固定宽度 */
  margin-right: 8px;
}

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