如何将「Date of ship」标签设置在输入框旁而非上方？

嘿，我来帮你搞定这个布局需求！要把「Date of ship」标签放在输入框侧边而非上方，用CSS的Flexbox或者Grid都能轻松实现，下面给你两种实用的方案，附带代码示例：

方案一：Flexbox 实现（最推荐，兼容性好） #

这是目前最常用的表单布局方式，简单灵活，兼容性覆盖绝大多数现代浏览器。

HTML 结构 #

<div class="form-group">
  <label for="ship-date">Date of ship</label>
  <input type="date" id="ship-date" name="ship-date">
</div>

CSS 样式 #

.form-group {
  /* 开启Flex布局，让子元素横向排列 */
  display: flex;
  /* 垂直方向居中对齐，保证标签和输入框高度一致 */
  align-items: center;
  /* 标签与输入框之间的间距，可根据需求调整 */
  gap: 12px;
  /* 可选：给表单组添加上下间距，避免和其他元素拥挤 */
  margin-bottom: 16px;
}

/* 可选：给标签设置最小宽度，防止标签过短导致布局混乱 */
.form-group label {
  min-width: 120px;
}

/* 让输入框自动填充剩余空间（可选，根据布局需求调整） */
.form-group input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

方案二：Grid 布局（更直观的列控制） #

如果你需要更精确的列宽控制，或者表单整体用Grid布局统一规范，这个方案会更合适。

HTML 结构 #

和Flex方案的HTML结构完全一致，不需要改动：

<div class="form-group">
  <label for="ship-date">Date of ship</label>
  <input type="date" id="ship-date" name="ship-date">
</div>

CSS 样式 #

.form-group {
  /* 开启Grid布局 */
  display: grid;
  /* 定义两列：第一列（标签）自适应宽度，第二列（输入框）占满剩余空间 */
  grid-template-columns: auto 1fr;
  /* 列之间的间距 */
  column-gap: 12px;
  /* 垂直方向居中对齐 */
  align-items: center;
  margin-bottom: 16px;
}

.form-group input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

可选：响应式优化（小屏幕适配） #

如果希望在手机等小屏幕设备上，标签自动回到输入框上方，可以添加媒体查询：

Flex方案的响应式代码 #

@media (max-width: 600px) {
  .form-group {
    /* 小屏幕下改为纵向排列 */
    flex-direction: column;
    /* 让标签左对齐，避免居中显得奇怪 */
    align-items: flex-start;
    /* 缩小上下间距 */
    gap: 6px;
  }
}

Grid方案的响应式代码 #

@media (max-width: 600px) {
  .form-group {
    /* 小屏幕下改为单列布局 */
    grid-template-columns: 1fr;
    /* 行之间的间距 */
    row-gap: 6px;
  }
}

这两种方案都能完美实现你的需求，根据项目的现有布局规范选择就行啦！

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