最可靠方法是父容器设 display: flex，子项用 flex: 0 0 auto + gap: 8px + height: 36px；避免 float（已弃用）和 inline-block（有空白间隙、宽度不一致）；移动端需加 min-width: fit-content 防压缩。
用 CSS Flex 布局让 <input type="date"> 横向排列最可靠
直接给父容器加 display: flex，比浮动、inline-block 或表格更可控，也避免默认 width 过宽撑满整行的问题。
常见错误是只写 display: inline-block 却没处理默认的 width: 100%，结果每个日期框还是一行一个。
- 父元素（比如
<div>）必须设置display: flex - 每个
<input type="date">建议加flex: 0 0 auto，防止被拉伸变形 - 加上
gap: 8px控制间距，比用margin更干净 - 在 Safari 上，
type="date"的默认高度可能略高，可统一加height: 36px对齐
<div style="display: flex; gap: 8px;"> <input type="date" style="flex: 0 0 auto; height: 36px;"> <input type="date" style="flex: 0 0 auto; height: 36px;"> <input type="date" style="flex: 0 0 auto; height: 36px;"> </div>
为什么不用 float 或 inline-block
老方法在现代项目里容易出问题：浮动需要清空，inline-block 会因换行符产生空白间隙，且无法响应式收缩。
更关键的是，<input type="date"> 在不同浏览器中渲染宽度不一致（Chrome 默认约 140px，Firefox 约 120px），靠固定 width 很难对齐。
立即学习“前端免费学习笔记（深入）”；
-
float已被弃用，CSS 规范明确不推荐用于布局 -
inline-block需要删 HTML 换行或设font-size: 0，维护成本高 - Flex 可自动处理子项尺寸差异，适配性更强
移动端要注意 min-width 和缩放
部分 Android 浏览器或 iOS Safari 会强制放大输入框，导致横向溢出或错位。
- 给父容器加
min-width: fit-content防止被压缩过小 - 在
<meta name="viewport">中确保没有禁用缩放（如user-scalable=no） - 如果页面整体缩放异常，检查是否误设了
html { font-size: 62.5% }影响了 rem 计算
用 grid 替代 flex 的适用场景
当需要严格等宽、或固定列数（比如始终显示 3 个日期框并自动换行），grid 更合适。
- 例如：三列等宽且超出自动折行 —— 用
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; - 但注意：IE 不支持
grid，若需兼容 IE11，只能退回 flex + JS 补丁 - Grid 的
minmax()能更好约束单个日期框最小宽度，避免在窄屏下挤压失效
复杂点在于，type="date" 的内部控件（如日历图标、下拉箭头）在不同系统上不可样式化，横向排列时视觉对齐永远差那么一两个像素——别花时间调它，用户不会盯着看。
