如何使用 CSS 将两个日期选择器并排显示在同一行-html教程-PHP中文网

本文介绍如何通过 CSS 的 display: flex 实现两个日期选择器（或任意表单字段）水平对齐、等宽布局，并保持响应式与间距可控。

本文介绍如何通过 css 的 `display: flex` 实现两个日期选择器（或任意表单字段）水平对齐、等宽布局，并保持响应式与间距可控。

在网页表单设计中，常需将多个输入控件（如日期选择器）并排展示以节省垂直空间、提升界面清晰度。默认情况下，块级元素（如

）会垂直堆叠，而最现代、简洁且可靠的解决方案是使用 Flexbox 布局。

✅ 推荐方案：Flexbox 水平排列

将两个日期选择器包裹在一个容器中，并为该容器设置 display: flex，即可天然实现同行排列：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.container {
  display: flex;
  gap: 16px;           /* 推荐替代 margin 的间距方式（CSS Grid/Flex 新特性） */
  flex-wrap: wrap;     /* 可选：小屏幕下自动换行 */
}

? gap 属性比手动设置左右 margin 更语义化、更易维护，且不会影响首尾元素的外边距计算。若需兼容较老浏览器（如 IE），可回退使用 margin 配合 :first-child 或类名控制。

? 完整 HTML + CSS 示例



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并排日期选择器</title><style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Segoe UI', 'Open Sans', sans-serif;
      padding: 24px;
      color: #333;
    }
    .container {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .date-field {
      flex: 1;                   /* 自适应宽度，均分容器空间 */
      min-width: 240px;          /* 保证小屏下仍有可用宽度 */
    }
    .date-field label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      color: #444;
    }
    .date-field input[type="date"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }
    @media (max-width: 600px) {
      .container {
        flex-direction: column;  /* 移动端转为垂直堆叠，更易操作 */
      }
    }
  </style><div class="container">
    <div class="date-field">
      <label for="start-date">开始日期：</label>
      <input type="date" id="start-date">
</div>
    <div class="date-field">
      <label for="end-date">结束日期：</label>
      <input type="date" id="end-date">
</div>
  </div>