HTML/CSS中“选项卡”的方法是什么？

Question

我有两个文本段，我想要显示在同一行上，然后在它们之间竖线，如下所示：

空间空间1航天空间

对不起，这个可怕的例子，但我不知道如何在这里创建多个空格。中间的l是意欲的垂直线。

现在我的想法之一是在Microsoft中使用"tab“函数，但我不知道如何在HTML中使用它。至于垂直线，我在想，也许在右边的文字段周围放一个左边框？

但是为此，我需要2

语句，如果我做了2

语句，文本就会出现在单独的文本行上。

任何帮助都很感激！

Answer 1

我建议您使用<span>元素(这是一个内联元素)对分隔符和CSS margin添加空间。

就像这样：

blah blah blah<span class="separator">|</span>blah blah blah

span.separator {
    margin:0 25px;
}

http://jsfiddle.net/D3Zsn/

编辑：

要对分隔符的外观有更多的控制，可以使用边框(如user3072059所述)。然而，在这种情况下，我会以不同的方式构造事物：

<p>blah blah blah<span class="separator"></span>blah blah blah</p>

p {
    line-height:30px;
    border:1px solid #FAA; /* Show an outline (for debugging purposes) */
}

span.separator {
    border-left:1px solid #000;
    padding:5px 25px 5px 0;
    margin:0 0 0 25px;
}

根据需要调整值以实现您想要的外观。

http://jsfiddle.net/D3Zsn/2/

Answer 2

在

元素中对span使用tabindex attr

Answer 3

可以使用<span>元素对<p>进行内联样式设计。

如下所示：

<p>Blablabla<span class="border_left">bla bla bla<span><p>

<style>
.border_left{
   border-left: 1px solid #000;
}
</style>