如何在 HTML 有序列表中实现列表项文本的完全两端对齐

通过为 `

` 元素设置 `text-align-last: justify` 并配合 `max-width: max-content`，可使每个列表项（`
1. `）内的文字实现真正的两端对齐效果，避免默认左对齐导致的右侧参差不齐。

   在 HTML 中，text-align: justify 默认仅作用于块级元素的内部行内内容，但对

   或
   这类列表容器直接应用 text-align: justify 并不能让每个
   • 的末行也拉伸对齐——因为列表项本身是块级元素，其最后一行对齐需额外控制。

     正确做法是使用 text-align-last: justify，该 CSS 属性专门用于控制段落最后一行（或单行文本）的对齐方式。但要注意：text-align-last 仅在 text-align 值为 justify 时生效，且需确保文本有足够长度以触发换行（否则单行无法“拉伸”）。因此，我们还需限制列表整体宽度，促使每项内容自然折行，从而让 text-align-last 发挥作用。

     推荐方案如下：

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

     ✅ 关键要点说明：

     • max-width: max-content：防止列表过度撑宽，强制每项按内容自然换行（尤其适合德语等长单词语言）；
     • text-align: justify：启用整体两端对齐基础；
     • text-align-last: justify：确保末行（包括单行列表项）也参与拉伸对齐；
     • margin: 0 auto：居中对齐整个列表（可选，提升视觉平衡）。

     ⚠️ 注意事项：

     • text-align-last 在旧版 Safari（≤15.4）中支持有限，如需兼容 IE 或早期浏览器，建议搭配 JavaScript 微调或改用 text-align: justify + 伪元素添加空格补全（不推荐，维护成本高）；
     • 若列表项过短（如仅 1–2 个词），浏览器可能因无法合理分词而忽略两端对齐——此时可考虑添加 hyphens: auto（配合 lang="de" 提升德语连字符支持）；
     • 避免在
     • 上单独设置 text-align，以免覆盖父级
       的对齐指令。

     综上，该方法简洁、语义清晰、无需额外 DOM 结构或 JS，是现代 CSS 实现列表项全文本两端对齐的最佳实践。