Question

只是想知道是否只有使用html和css这样做的简洁方法。

我想显示3行，每行包含一个姓名和一个电话号码，它应该是这样的：

一个名称，多个空格后跟一个电话号码。然后是一个新的行，以一个名称和多个空格开头，后跟另一个电话号码，第三行使用相同的逻辑。

多个空格的目的是缩进，以便名称和电话号码在网页上看起来不错。

我觉得插入多个＆amp; nbsp很难看（除非没有其他选项）......

任何干净利落的聪明方法吗？

非常感谢！（顺便说一下，我现在使用3段来表达上述内容。）

Answer 1

你可能想要一张桌子。

如果没有，您可能需要一个列表，其中一些项目（电话号码）设置为float: right，或display: inline-block，但有一些左边距。

Answer 2

使用带有 margin-left：10px 的电话号码的span类。并且可以使用b / w名称和电话号码中所需的像素值更改边距左侧位置。请参阅下面的代码< / p>

HTML

Name<span class="phone">1234567890</span></br>
Name<span class="phone">1234567890</span></br>
Name<span class="phone">1234567890</span></br>

CSS

.phone
{
    margin-left:10px;
}

Answer 3

这个小提琴怎么样：http://jsfiddle.net/W7wXa/2/

标记：

<div class="container">
    <div class="left">
        <div>Name 1</div>
        <div>Name 2</div>
        <div>Name 3</div>
    </div>
    <div class="right">
        <div>123-456-7890</div>
        <div>123-456-7890</div>
        <div>123-456-7890</div>
    </div>
</div>

的CSS：

.left {
    display: inline-block;
}

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

希望这有帮助。

Answer 4

如果问题是缩进，您可以使用表格。您可以对齐表格中的单元格以获得所需的输出。

如何在特定的单词之间添加多个空格？

4 个答案: