如何实现 HTML 有序列表(ol)中列表项的完全两端对齐

通过为 `

    ` 元素设置 `text-align-last: justify` 并配合 `max-width: max-content`,可使每个列表项(`
  1. `)内部文本实现真正的两端对齐,避免默认左对齐或因换行导致的末行对齐异常。

    在 HTML 中,text-align: justify 默认仅作用于块级元素的行内内容,且对最后一行无效(浏览器会按左对齐处理)。而

  2. 作为块级元素,其内部文本若要实现每行(含末行)均严格两端对齐,需额外控制容器行为。

    关键在于两点:

    1. text-align-last: justify:显式指定段落最后一行也执行两端对齐;
    2. max-width: max-content(或固定宽度如 max-width: 600px):确保
        容器不自动撑满父容器宽度,从而让 text-align-last 在每一项中独立生效。若
          宽度为 100%,所有
        1. 将继承相同宽度,但因各列表项文本长度不同,单纯 justify 可能导致单词间距异常拉伸;max-content 让容器宽度由最长
        2. 内容自然决定,再配合 text-align-last,即可稳定实现每项末行对齐。

        ✅ 正确写法如下:

        Attention Restoration Theory

        1. Faszination: Die Natur weckt Aufmerksamkeit, die nicht anstrengt, sondern regeneriert.
        2. Weg sein: Die Natur ermöglicht einen Abstand zum Alltag.
        3. Ausdehnung: Die Natur ermöglicht das Gefühl, sich mit dieser verbunden zu fühlen.
        4. Kompatibilität: Die Natur bietet einer Person die Möglichkeit, zu tun, was ihren Bedürfnissen entspricht.

        ⚠️ 注意事项:

      • text-align-last 在部分旧版浏览器(如 IE)中支持有限,现代 Chrome、Firefox、Edge(Chromium)、Safari 15.4+ 均已良好支持;
      • 若需兼容性更强的方案,可改用 CSS Grid 或 Flexbox 手动控制,但会显著增加复杂度;
      • 避免对
      • 单独设置 text-align —— 应统一在
          上定义,确保样式继承一致;
      • 德语等含长复合词的语言可能因断词限制影响对齐效果,必要时可添加 hyphens: auto(需配合 lang="de" 和 -webkit-hyphens 等前缀)提升可读性。

      总结:text-align-last: justify 是实现列表项「真正全行两端对齐」的最简洁、语义化方案,搭配 max-width: max-content 即可兼顾排版精度与代码可维护性。