用更好的东西代替

Question

我有以下代码。

我正在尝试替换4＆amp; nbsp：

的用户

   <p>First: 10&nbsp;&nbsp;&nbsp;&nbsp;Second: 21&nbsp;&nbsp;&nbsp;&nbsp;Third:31&nbsp;&nbsp;&nbsp;&nbsp</p>

我尝试了以下内容：

    <span class='spanspc'>

CSS：

    .spanSpacing {
        margin-left:30px;   
      }

Answer 1

您的<span>不尊重保证金，因为默认设置为display: inline。您可以将它们设置为display: inline-block以便轻松修复：

span {
  display: inline-block;
  margin-right: 20px;
}

<p>
  <span>First: 20</span>
  <span>Second: 21</span>
  <span>Third: 31</span>
</p>

如果您正在处理数据，则应考虑使用<table>：

table {
  width: 300px;
}

<table>
  <tr>
    <td>First: 10</td>
    <td>Second: 21</td>
    <td>Third: 31</td>
  </tr>
<table>

如果信息更多是列表，请使用<ul>或<ol>：

ol {
  padding: 0;
}
ol > li {
  display: inline-block;
  list-style-type: none;
  margin: 0 2em 0 0;
}

<ol>
  <li>First: 20</li>
  <li>Second: 21</li>
  <li>Third: 31</li>
</ol>

Answer 2

对于这一行html，您可以使用<pre>标记

喜欢

＆＃13;

＆＃13;

<pre>First: 10    Second: 21    Third:31  </pre>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您不能使用已提及的pre，也不能使用CSS样式， 是您的最佳选择，但是您可以通过将其他每个设置为实际空间来使其更加清晰。

<p>First: 10&nbsp; &nbsp; Second:21 &nbsp; &nbsp;Third:31 &nbsp; &nbsp</p>