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

在网页布局中，有序列表<ol>常用于展示有顺序的内容条目，但默认的列表样式下，列表项文本往往无法做到完全两端对齐，尤其是当文本换行后，最后一行会保持左对齐，破坏整体排版的一致性。要实现<ol>中列表项的完全两端对齐，需要结合CSS的特定属性配置来达成效果。

基础实现思路

要实现完全两端对齐，核心是使用text-align: justify属性，但该属性默认不会处理块级元素的最后一行文本。因此需要配合text-align-last: justify属性来指定最后一行也采用两端对齐，同时还需要处理列表项的内联特性适配问题。

基础CSS配置

首先为<ol>和内部的<li>元素设置对应的样式，具体代码如下：

/* 配置有序列表整体样式 */
ol.justify-list {
    padding-left: 20px;
    list-style-position: outside;
}
/* 配置列表项样式 */
ol.justify-list li {
    text-align: justify;
    text-align-last: justify;
    /* 兼容旧版本浏览器 */
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    line-height: 1.6;
    margin-bottom: 8px;
}

HTML结构示例

对应的HTML结构如下，列表项可以包含长短不一的文本来验证对齐效果：

<ol class="justify-list">
    <li>这是第一条列表内容，文本长度较短，用于测试短文本的对齐效果</li>
    <li>这是第二条列表内容，文本长度适中，用于验证中等长度文本的两端对齐表现，确保左右边距对齐</li>
    <li>这是第三条列表内容，文本长度较长，会触发换行效果，需要验证换行后的多行文本是否都能实现完全两端对齐，避免出现最后一行左对齐的情况</li>
</ol>

浏览器兼容性处理

部分旧版本浏览器可能不支持text-align-last属性，此时可以通过添加伪元素的方式模拟两端对齐效果，代码如下：

/* 兼容不支持text-align-last的浏览器 */
ol.justify-list li:after {
    content: "";
    display: inline-block;
    width: 100%;
}

这种方式通过为列表项末尾添加一个宽度为100%的内联块元素，强制触发文本的两端对齐规则，从而在不支持text-align-last的浏览器中也能实现一致的对齐效果。

注意事项

• 如果列表项文本只有一行，text-align: justify可能不会生效，此时可以保持默认左对齐，或者根据需求调整对齐规则。
• 设置list-style-position: outside可以避免列表标记被对齐规则影响，保证标记位置和文本对齐效果互不冲突。
• 如果列表项中包含内联块元素或者浮动元素，需要先清除这些元素对文本对齐规则的干扰，再应用两端对齐样式。

效果验证

将上述代码整合后，在浏览器中运行可以看到，无论列表项文本是短文本还是换行后的长文本，所有行的左右两侧都会完全对齐，实现预期的完全两端对齐效果。如果需要调整列表项的间距或者行高，可以修改对应CSS属性的值，不会影响对齐效果。

HTMLoltext_align_justifyCSS修改时间：2026-06-13 01:21:18