display: block可使独占一行自然换行，因其默认为行内元素；需用属性选择器input[type="date"]精准控制，并配合margin-bottom留白，避免影响其他输入框。

用 display: block 让 <input type="date"> 自然换行

默认情况下，<input> 是 inline 元素，多个写在一行会并排显示。最直接的解法就是强制它独占一行：display: block。

不需要额外容器、不用 flex、不用 float——只要给每个日期输入框加这一条 CSS 就够了：

input[type="date"] {
  display: block;
  margin-bottom: 0.5em;
}

• 注意必须写 input[type="date"]，不能只写 input，否则会影响所有输入框
• margin-bottom 是为了留出间距，避免紧贴在一起，数值按需调整
• 这个写法兼容所有现代浏览器（Chrome 20+、Firefox 57+、Edge 16+、Safari 14.1+）

如果用了 <form></form> 或 <div> 包裹，别忘了清除默认内边距 <p>很多框架或重置样式（如 normalize.css）会让 <code><form></form> 默认有 margin 或 padding，导致顶部/底部多出空白，看起来“没对齐”。

• 检查开发者工具里 <form></form> 或父容器是否带 margin-top/margin-bottom
• 稳妥做法是显式重置：form { margin: 0; padding: 0; }
• 如果用 <div class="date-group"> 包裹，也建议加 <code>margin: 0; padding: 0;，避免意外留白

  别用 <br> 强制换行——它不可控且语义错误

  有人会写成这样：

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  立即学习“前端免费学习笔记（深入）”；

  <input type="date"><br>
  <input type="date"><br>
  <input type="date">

  这看似能实现纵向排列，但问题明显：

  • <br> 是纯表现标签，违背 HTML 语义化原则
  • 响应式场景下，<br> 不会随屏幕缩放自动调整，容易造成错位
  • 无障碍访问（如屏幕阅读器）可能误读为内容分隔，影响可访问性
  • 后续想加动画、JS 控制显隐或校验时，DOM 结构更难维护

  用 flex-direction: column 的前提：确保父容器不设 width: fit-content

  如果已经用了 flex 布局，却还是横向排列，大概率是父容器宽度被压缩了。

  • 错误写法：div { display: flex; flex-direction: column; width: fit-content; } → 子项仍会“挤”成窄列，视觉上像没生效
  • 正确写法：div { display: flex; flex-direction: column; width: 100%; } 或直接去掉 width
  • 另外注意：flex 容器默认 align-items: stretch，会导致所有 input 拉宽到父容器宽度，如需固定宽度，加 align-items: flex-start
  实际排布效果的关键往往不在“怎么堆”，而在“谁在撑宽度、谁在加空隙、谁偷偷加了 margin”。浏览器渲染时，哪怕一个像素的默认间距都可能让纵向对齐看起来歪掉。