最稳结构是语义化标签组合用time标记时间点、ol表达任务顺序、CSS Grid控制横向时间比例避免table模拟或absolute硬堆确保datetime属性、minmax列宽、内容截断及IE11 Flex降级。HTML 甘特图用什么结构最稳纯 HTML 不适合画带刻度的甘特图但能搭出可读、可维护、语义清晰的时间线占位结构——关键是别用 table 模拟时间轴也别靠一堆 div position: absolute 硬堆日期。稳妥做法是用语义化标签组合time 标记时间点dl 或 ol 表达任务顺序再用 CSS Grid 控制横向时间比例。time datetime2024-03-153月15日/time 必须写 datetime 属性否则无法被辅助工具识别也不方便后续 JS 解析任务项用 ol 而非 ul因为时间线天然有序ol 的隐式序号可作视觉锚点哪怕 CSS 关掉避免把所有时间单位天/周/月塞进 class 名比如 classday-7 —— 这会让 CSS 难以扩展改周期就得批量修 classCSS Grid 实现等宽时间槽的坑想让“第1周”“第2周”在横向上等宽直接写 grid-template-columns: repeat(12, 1fr) 看似合理实际会因内容撑开列宽尤其当某任务标题很长时整行错位。真正可控的方式是固定列数 强制最小宽度 内容截断。用 minmax(120px, 1fr) 替代纯 1fr防止窄屏下时间槽压缩到看不见对任务标题加 overflow: hidden; text-overflow: ellipsis; white-space: nowrap否则换行会破坏 Grid 行高一致性别给 time 元素设 display: block 后又居中——它默认是 inline强行 block 容易引发基线对齐问题改用 text-align: center 更安全如何让“跨多周任务”在 HTML 中自然表达静态甘特图里最麻烦的是横跨多个时间单元的任务条。HTML 没有原生“跨列”语义硬用 colspan 会破坏 Grid 布局用 width 百分比又难对齐真实日期。解法是放弃“一个任务一个元素”改用“一个时间槽一个容器”内部判断是否属于该任务。每个时间槽如“第3周”是一个 li里面放 span classtask data-task-idt2/spanJS 初始化时遍历所有 data-task-id查其起止时间再给对应时间槽的 span 加 classactive 和 stylegrid-column-start: 3; grid-column-end: 6;纯静态场景下可手动写 stylegrid-column: 3 / 6;但必须确保数字和实际列索引严格对应错一位就偏移整段IE11 兼容时 Grid 时间轴的降级策略如果项目仍需支持 IE11display: grid 会失效但不必整个重写为 float 布局。可以用 supports 分层对不支持 Grid 的环境启用 Flex 降级同时保留结构语义。 知元AI AI智能语音聊天 对讲问答 AI绘画 AI写作 AI创作助手工具