Html 对齐一组标签和值

我是html和css新手，所以很难确定如何将所有分号像截图一样对齐

PSD看起来像：

这是我的HTML标记

 <ul>
    <li>Name <span>: John Doe</span></li>
    <li>Age <span>: 30.30.30</span></li>
 </ul>

结果是screeshot：

---

对此，适当的标记和css将是什么？

确定另一个解决方案。踢

li{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
跨度{
宽度：400px；
文本对齐：左对齐；
}

姓名：无名氏
另一件事：约翰·沃尔
最后：最后一件事

姓名：无名氏
年龄：30.30.30

对于

li

使用

显示：表格行

，对于

标签

s使用

显示：表格单元格

li{
左侧填充：20px；
显示：表格行；
}  
li标签{
显示：表格单元格；
}
li标签：非（：第一个孩子）{
左侧填充：40px；
}

姓名：无名氏
年龄：30.30.30

2种实现方法

使用

表格

<table>
    <tr>
        <td>Name</td>
        <td>: John</td>
    </tr>
</table>

---

希望这对你有帮助

桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
运输署{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
名称
无名氏
年龄
30.30.30

您可以使用表格如下：

<tbody class="table" >
    <tr>
      <td>Name</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Age</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>Job</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

---

希望这对您有所帮助

您也可以将您的名字：etc.放在一个span中，并为这个span指定一个固定宽度的类。或者用表格代替。你可以用表格结构。如果第二个

li

是家人怎么办？对不起。我不明白你的问题。像那样？

<ul>
    <li><span>Name </span><span>: John Doe</span></li>
    <li><span>Age </span><span>: 30.30.30</span></li>
 </ul>

li span:first-child {
    width: 200px;
}

<tbody class="table" >
    <tr>
      <td>Name</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Age</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>Job</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

.table td{
  padding-left: 3em;
}