html - 在 ul 中缩进文本的右侧部分

Question

我想列出玩家的个人信息。但是我遇到了缩进问题，所以我使用了空格，如下所示:

<ul>
  <li>
    <span>Name:</span>&nbsp;Charis Spiropoulos
  </li>
  <li>
    <span>Birth:</span>&nbsp;&nbsp;10/02/1996
  </li>
</ul>

如果没有空格，描述性文本将从 ://我用谷歌搜索它的名字开始，但我只得到编程结果 :)

我尝试使用填充，但没有成功。有什么想法吗？这是一个jsfiddle一起玩。

Answer 1

您可以使用这些样式使 span 具有相同的宽度:

li {
  display: table-row;
}

li span {
  display: table-cell;
  padding-right: 1em;   /* padding after the span */
}

li::before {
  content: '\2022';     /* restore the bullet */
  padding-right: 0.5em; /* space after the bullet */
}

Fiddle