如何在html列表中允许额外的空格

Question

我想在列表项中有额外的空格，但浏览器在渲染时会删除它们。

<ul>
  <li>Row    1</li>
  <li>Row    2</li>
</ul>

我希望渲染列表为每个项目保留额外的空格。

Answer 1

您可以使用span和margin。

＆＃13;

＆＃13;

.extra {
  margin-right: 3em;
}

＆＃13;

<ul>
  <li><span class="extra">Row</span><span>1</span></li>
  <li><span class="extra">Row</span><span>2</span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在li元素上设置white-space：pre

li { white-space: pre}

有关空白区域的更多信息，请参阅https://developer.mozilla.org/en/docs/Web/CSS/white-space。

Answer 3

您可以在标记中包含一个单词，例如span并为其设置边距

Answer 4

标题说空格不是额外的空间。

你可以写

&nbsp

放置空间字符。

<li>Row&nbsp&nbsp&nbsp2</li>