如何在html列表中允许额外的空格[重复]

【问题标题】：How to allow extra spaces in html lists [duplicate]如何在html列表中允许额外的空格[重复]
【发布时间】：2017-08-22 14:29:28
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

你可以在你的 li 元素上设置 white-space: pre

li { white-space: pre}

【讨论】：

【解决方案2】：

您可以使用span 和margin。

.extra {
  margin-right: 3em;
}

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

你可以写

&nbsp

放置一个空格字符。

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

【讨论】：