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

Question

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

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

没有空格，描述性文本将从以下内容开始：//我用Google搜索其名称，但我只获得编程结果：）

我尝试使用填充，但没有运气。有什么想法吗？这是一个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