HTML/CSS 中“制表符”的方式是什么？答案

【问题标题】：What is the way to ''tab'' in HTML/CSS?HTML/CSS 中“制表符”的方式是什么？
【发布时间】：2013-12-23 00:47:41
【问题描述】：

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

blablablalbalblalbasldasd spacespacespacespace l spacespacespacespace blablablalbalbal

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

现在我的一个想法是在 Microsoft Word 中使用“制表符”功能，但我不知道如何在 HTML 中使用它。至于垂直线，我在想也许在右段文本周围加一个左边框？

但是为此我需要 2 个语句，如果我创建 2 个语句，则文本会出现在单独的文本行中。

任何帮助表示赞赏！

【问题讨论】：

Possible duplicate
我的问题还有很多。
您的s 出现在不同的行中，因为它们是block 级别的内容，默认情况下占据了它们行的整个宽度。您可以通过 CSS 在 标签上设置display:inline;，或者只使用s（默认为inline）将您的内容放在同一行（假设您的内容的宽度总和小于其容器的宽度，否则您的内容将在没有更多 CSS 规则的情况下中断到下一行）。从那里，您可以使用该链接问题中的技术。
这似乎运作良好。现在是我的垂直线。有什么想法吗？对于我的想法，我需要两个。
在您的s 或内联s 之间，只需放置一个| 字符，并将左/右margin 规则添加到您的/ 元素。 @showdev 的答案或多或少是这样的，尽管她/他将 | 放在  中并在其上设置 margin，而不是在包含文本的元素上设置 margin。

标签： html css

【解决方案1】：

我建议您使用 元素（它是一个内联元素）作为分隔符，并使用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/

【讨论】：

谢谢。如果我的线条高度固定，这似乎效果很好，但我需要线条稍长一些。
明白了。如@user3072059 所述，您可以使用边框。但是，在那种情况下，我会以不同的方式组织事情。我用另一种方法编辑了我的答案。
做到了！非常感谢！

【解决方案2】：

在

元素内的 span 上使用 tabindex 属性

【讨论】：

【解决方案3】：

您可以使用 元素来设置 内联的样式。

像这样：

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

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

【讨论】：