如何用CSS在HTML页面将两个datepicker横向并排显示？

直接上几种靠谱的实现方式，根据你的项目技术栈选就行：

方案1：Flexbox布局（推荐） #

这是目前最简洁的方法，兼容性也好，直接给两个Datepicker的父容器加flex属性，再用gap控制间距：

<!-- HTML结构 -->
<div class="datepicker-container">
  <input type="date" class="datepicker" id="start-date">
  <input type="date" class="datepicker" id="end-date">
</div>

/* CSS样式 */
.datepicker-container {
  display: flex;
  gap: 16px; /* 这里设置你需要的间距大小 */
}

/* 如果Datepicker组件自带block样式，强制改成flex-item */
.datepicker {
  /* 可选：设置固定宽度，避免宽度不一致 */
  width: 180px;
}

方案2：Inline-block布局 #

如果项目里还在用旧的布局方式，给每个Datepicker设置inline-block，再用margin控制间距：

<div class="datepicker-container">
  <input type="date" class="datepicker" id="start-date">
  <input type="date" class="datepicker" id="end-date">
</div>

.datepicker-container {
  /* 解决inline-block元素间的默认空白间隙 */
  font-size: 0;
}

.datepicker {
  display: inline-block;
  margin-right: 16px; /* 给第一个元素加右侧间距 */
  font-size: 14px; /* 恢复默认字体大小 */
  width: 180px;
}

/* 去掉第二个元素的右侧间距，避免容器多余空白 */
.datepicker:last-child {
  margin-right: 0;
}

方案3：Grid布局 #

用Grid也能快速实现，适合需要更复杂布局的场景：

<div class="datepicker-container">
  <input type="date" class="datepicker" id="start-date">
  <input type="date" class="datepicker" id="end-date">
</div>

.datepicker-container {
  display: grid;
  grid-template-columns: auto auto; /* 两列自适应宽度 */
  gap: 16px; /* 间距 */
}

注意事项 #

• 如果用的是UI框架（比如Element UI、Ant Design）的Datepicker组件，需要找到组件的外层容器来加样式，而不是直接给input标签加。比如Element的Datepicker外层是el-date-picker类，直接给这个类加flex: 1或者display: inline-block就行。
• 测试不同屏幕尺寸的适配，必要时加媒体查询，小屏幕自动切回垂直布局：

@media (max-width: 480px) {
  .datepicker-container {
    flex-direction: column;
  }
}

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