【问题标题】: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】:

您的 &lt;span&gt;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>

如果您正在处理数据,您应该考虑使用&lt;table&gt;

table {
  width: 300px;
}
<table>
  <tr>
    <td>First: 10</td>
    <td>Second: 21</td>
    <td>Third: 31</td>
  </tr>
<table>

如果信息更多是列表,请使用&lt;ul&gt;&lt;ol&gt;

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 样式,那么 &amp;nbsp; 是您的最佳选择,但是您可以通过将其他每个空间设置为实际空间来使其更简洁。

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

    【讨论】:

      【解决方案3】:

      对于这行html,可以使用&lt;pre&gt;标签

      喜欢

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-01-29
        • 1970-01-01
        • 2023-03-07
        • 1970-01-01
        • 2012-07-21
        相关资源
        最近更新 更多