用更好的东西代替答案

【问题标题】：Replacing   with something better用更好的东西代替
【发布时间】：2014-11-19 03:09:33
【问题描述】：

我有以下代码。

我正在尝试替换 4 &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;   
      }

【问题讨论】：

标签： html

【解决方案1】：

您的 <span>s 不尊重边距，因为它们默认设置为 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>

【讨论】：

【解决方案2】：

如果您不能使用前面提到的 pre，也不能使用 CSS 样式，那么 &nbsp; 是您的最佳选择，但是您可以通过将其他每个空间设置为实际空间来使其更简洁。

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

【讨论】：

【解决方案3】：

对于这行html，可以使用<pre>标签

喜欢

&lt;pre&gt;First: 10    Second: 21    Third:31  &lt;/pre&gt;

【讨论】：