HTML有序列表序号对齐：如何将罗马数字置于固定宽度背景框上

数据老陈

2026-8-29

有序列表罗马数字序号样式调整方案

无需修改任何HTML结构，仅调整CSS即可实现全部需求：罗马数字序号居中显示在固定宽度黄色背景块上方、长序号溢出背景块无额外黄色背景、所有列表文本（含换行段落）左对齐完全统一，同时保留原有布局样式。

核心调整逻辑

给列表项li设置相对定位作为定位基准，通过固定左侧内边距预留序号区域，彻底解决多行文本缩进对齐不一致问题
拆分两个伪元素分别实现黄色背景块、罗马数字序号，通过绝对定位控制层级：序号层级更高浮于上层，垂直偏移到背景块上方，水平居中
黄色背景块设置固定宽高，不受序号长度影响；序号居中对齐，长序号自然溢出背景块区域，溢出部分无黄色背景

调整后完整CSS代码

html {margin: 40px}
body {margin: 0 auto;}
article{background: #EEE;  padding: 0em;}

ol {
  list-style-type: none; 
  counter-reset: section;
}

ol li{
    position: relative;
    border-bottom: 2px solid #CCC;
    padding-left: 1.5em;
    margin: 0.6em 0;
}

/* 伪元素实现固定宽度黄色背景块 */
ol li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1em;
    height: 0.6em;
    background: yellow;
}

/* 伪元素实现居中上浮的罗马数字序号 */
ol li:after {
    counter-increment: section;
    content: counter(section, lower-roman);
    position: absolute;
    left: 0;
    top: -0.3em;
    width: 1em;
    text-align: center;
    color: blue;
    z-index: 2;
}