有一个简单的css:

white-space: pre;

它保留您在HTML中添加的空格，而不是统一它们。

我们可以像这样使用style="white-space:pre":

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

里面的空白处填满了制表符，制表符的数量取决于文本。

它看起来是这样的:

Text    : value
Text2   : value2
Text32  : value32

&ampnbsp单位与字体大小有关。为了理解这种依赖关系，使用CSS/HTML方法考虑em和rem度量单位。

CSS

.tab { margin-left: 1rem; }

HTML

<div class=“tab> ...p and h elements... </div>

显示

1em约等于4  但是,Em unit和&ampnbsp rem unit的显示取决于元素和样式的使用，像这样缩进。

--------h1 indented 1em
--p indented 1em
----h1 indented 1rem
----p indented 1rem

左边距和左填充都有效。在HTML或CSS中没有标签长度单位。可以使用.tab类选择器。

如果你想要这些标签

像制表员一样工作，即使是在内容表中 不想用难看的“pre”字体

然后使用:

<pre class='TAB'>&#009;</pre>

把它放在你的CSS中:

.TAB {
margin:0; padding:0;
display:inline;
tab-size: 8;
}

根据需要更改制表符大小。

在CSS中有这个:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

然后在你的HTML有这是你的“长标签”在句子中间，就像我需要的:

<span class="tab"></span>

节省 或 这是你需要的。

尽管在HTML3中引入了<tab>标签，但它从未进入浏览器。我一直认为这是一种遗憾，因为如果我们拥有它，在许多情况下生活会轻松得多。但是你可以很容易地纠正这个错误，给你一个假的<tab>标签。在你的HTML头部或CSS中添加以下内容(没有样式标签):

<style>
    tab { padding-left: 4em; }
</style>

从那时起，当你需要在你的文档中添加一个选项卡时，把<tab>放在那里。它不是一个真正的制表符，因为它不与制表符标记对齐，但它可以满足大多数需求，而不必为笨拙的字符实体或跨度而犹豫不决。它使检查源代码变得非常容易，并且在你不想使用表格或其他更复杂的“解决方案”的地方格式化简单的东西。

这个解决方案的一个优点是，您可以快速搜索/替换文本文档，用<tab>标记替换所有tab。

你可以定义一堆真正的绝对位置制表符，然后在需要的地方使用适当的制表符(例如<tab2>或<tab5>或其他)，但我还没有找到一种方法来做到这一点，而不缩进后续行。