Html 对齐li元素中的跨距文本

使用dataTables，我有一个响应表，在子行中生成以下HTML

<ul data-dtr-index="0" class="dtr-details">
   <li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
      <span class="dtr-title">Pay No</span> 
      <span class="dtr-data">999</span>
   </li>
   <li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
      <span class="dtr-title">DOB</span> 
      <span class="dtr-data">14 Sep 1951</span>
   </li>
</ul>

不付钱
999


出生日期
1951年9月14日

---

使用CSS，我希望每个li中的第二个跨距（

dtr数据

）的文本向右对齐。这在CSS中是否可能，而不必修改DOM以将跨度放入div标记中？理想情况下，我不想创建自己的自定义渲染，因此能够仅通过CSS对齐span文本将是理想的

您可以使li相对，span绝对正确：0px。（或使用float:right）

方法1

float

有问题的嵌套元素（

.dtr data

）

代码片段演示：

.dtr数据{
浮动：对；
}
李{
最大宽度：300px；/*为了演示*/
清除：两个；/*清除浮动，以便测量*/
}

不付钱
999


出生日期
1951年9月14日

您可以使用flexbox进行此操作

这将重置

li

display

属性，该属性将删除项目符号，因此您需要重新引入它

例如：

li{
显示器：flex；
左边距：-1米；
}
李：以前{
内容：“•”；
右侧填充：.5em；
}
.dtr数据{
左边距：自动；
}

不付钱
999


出生日期
1951年9月14日

这确实是一个

表格，而不是列表？桌子不是更具语义吗。
li {
    position: relative;
}

li span:nth-child(2){
    position: absolute;
    right: 0px;
}