html - HTML/CSS 中 '' tab'' 的方法是什么？

Question

我有 2 段文本，我希望它们出现在同一行 上，然后它们之间有一条垂直线，如下所示:

blablabalbalblalbasldasd spacespacespacespace l spacespacespacespace blablabalbalbal

抱歉这个可怕的例子，但我不确定如何在这里制作多个空格。中间的 l 是预期的垂直线。

现在我的一个想法是在 Microsoft word 中使用“制表符”功能，但我不知道如何在 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/