如何扩展行宽，使表单容器内的输入字段显示在同一行？

方法1：使用Flex布局（最推荐） #

给表单容器添加flex样式，能让内部输入元素自动排列在一行，还能灵活控制间距与宽度占比，同时适配响应式场景。

.form-container {
  display: flex;
  gap: 12px; /* 控制字段间的间距 */
  width: 100%; /* 让容器占满父元素宽度 */
  flex-wrap: wrap; /* 屏幕变窄时自动换行，避免挤压 */
}

.form-container input {
  flex: 1; /* 让每个输入框平分可用宽度 */
  min-width: 180px; /* 设置最小宽度，防止字段过窄 */
  padding: 8px;
}

HTML结构示例：

<form class="form-container">
  <input type="text" placeholder="字段1">
  <input type="text" placeholder="字段2">
  <input type="text" placeholder="字段3">
</form>

方法2：使用inline-block #

若不想用flex布局，可给输入元素设置display: inline-block，同时调整容器宽度与元素间距。

.form-container {
  width: 100%;
  font-size: 0; /* 消除inline-block元素间的默认空白间隙 */
}

.form-container input {
  display: inline-block;
  width: calc(33.33% - 8px); /* 计算每个字段宽度，减去右侧间距 */
  margin-right: 8px;
  padding: 8px;
  font-size: 16px; /* 恢复输入框的字体大小 */
}

.form-container input:last-child {
  margin-right: 0; /* 最后一个字段去掉右侧间距 */
}

方法3：使用Grid布局 #

适合需要更精细列宽控制的场景，比如不同字段占据不同宽度比例。

.form-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 自动适配列数，最小宽度180px */
  gap: 12px;
  width: 100%;
}

.form-container input {
  padding: 8px;
}

额外提示 #

• 若表单容器的父元素有固定宽度限制，需先将父元素宽度改为width: 100%或设置合适的max-width，才能实现行宽扩展。
• 响应式优化：可添加媒体查询，在小屏幕设备上让字段自动堆叠，提升移动端体验。

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