如何让HTML页面中展示的列表数据从统一对齐点开始显示

核心问题说明 #

1. 序号元素使用了重复的id="rank"，HTML中id具有唯一性，重复id会导致样式仅对第一个元素生效
2. 序号元素没有固定宽度，不同位数的序号占位宽度不一致，导致后续标题起始位置偏移

代码调整 #

JS代码修改 #

将循环中序号的id属性改为class，避免重复id冲突：

let text = document.getElementById("text");
datares = response;
 
for (let i = 0; i < 5; i++) {
    text.innerHTML += "<a href= " + datares.jsonData.data[i].uri + " target= _blank class= 'links'><span class='rank'>" + datares.jsonData.data[i].rank + ".&nbsp </span>" + datares.jsonData.data[i].title + "</a><br>";
}

CSS代码修改 #

给rank类新增固定宽度样式，统一序号占位宽度：

/* 原#rank选择器改为.rank */
.rank {
    text-decoration: none !important;
    color: #006ccc;
    /* 宽度可根据序号最大位数调整，两位数用2em，三位数用3em即可 */
    display: inline-block;
    width: 2em;
    text-align: left;
}

a> span {
    display: inline-block;
    text-decoration: none !important;
}
.links {
    color: black;
    float: left;
    text-align: left;
    padding-left: 22px;
    font-size: 17px;
    width: 100%;
    text-decoration: underline;
    color: #006ccc
}

调整后所有序号会占用相同宽度，后续标题自然从统一位置开始对齐。

内容的提问来源于stack exchange，提问作者user15895653