在 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: '22';     /* restore the bullet */
  padding-right: 0.5em; /* space after the bullet */
}

Fiddle

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

Indent right part of text in ul

html

css

list

html-lists

indentation