Demo

Question

我希望我的html在屏幕上看起来一样，但它似乎没有正确地分隔内容。

HTML：

            <p>Unit         :       Apartment 15</p>
            <p>Available    :       July 1, 2014</p>
            <p>Rent         :       $695</p>

这就是它在scren上的表现：

Size     : 1 Bedroom
Location     :   3343 Westerwald Street
Unit     : Apartment 15
Available: July 1, 2014
Rent: $695

Answer 1

这是实现此输出的简单方法之一：

HTML：

<table>
    <tr><td>test1</td><td>:</td><td>test1</td></tr>
    <tr><td>test2</td><td>:</td><td>tesxt2</td></tr>
    <tr><td>test3</td><td>:</td><td>test2</td></tr>
</table>

的CSS：

td{width:100px}

Demo

输出：

test1   :   test1
test2   :   tesxt2
test3   :   test2

Answer 2

将内容呈现为最简单的方法是在white-space: pre元素上设置p。作为副作用，这使得字体等宽并缩小尺寸。

但是，这种方法会降低可访问性，并且在不破坏布局的情况下无法将字体更改为非等宽字体。

更好的方法是使用HTML表格。这取决于所需视觉外观的细节。在这里使用冒号有点不寻常。通常将数据放在列中就足够了。但如果你真的想要冒号，你可以使用例如这（冒号不是数据本身的一部分，而是CSS生成的内容）：

<style>
th, td { 
  text-align: left;
  font-weight: normal;
}
td:before {
  content: ":";
  padding-left: 1em;
  padding-right: 2em;
}
</style>
<table>
<tr><th>Unit <td>Apartment 15
<tr><th>Available <td>July 1, 2014
<tr><th>Rent <td>$695
</table>

Answer 3

如果您不想使用任何CSS，请使用：

<p>Unit&nbsp;:&nbsp;Apartment 15</p>
<p>Available&nbsp;:&nbsp;July 1, 2014</p>
<p>Rent&nbsp;:&nbsp;$695</p>

这里 是不间断的空间。如果你在html中给出实际的空间分隔并不重要，它们就不会出现。

使用上述方法并不是最好的方法，但如果你不想要任何css，它就可以了。您最好选择定位或使用表格元素！干杯！

间距段落排列双冒号 - 处理空格

3 个答案:

Demo