是否可以在HTML中插入一个制表符,而不必键入 四次吗?


当前回答

如果您只需要一个选项卡,那么下面的选项卡对我有用。

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

使用HTML的内容如下:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p> 

你可以添加更多的“标签”通过添加额外的“标签”样式和改变HTML,如:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

使用HTML的内容如下:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

其他回答

不,就HTML而言,Tab只是空白。我推荐一个这么大的em-space(→| |←)…通常是4个空格宽,输入为&emsp;

如果幸运的话,您甚至可以使用Unicode字符(" ")来表示它。

下面是Unicode中空格字符和“零宽度空格”的列表。

如果空格变得如此重要,那么使用预格式化文本和<pre>标记可能会更好。

p {background-color: #FFEEEE;保证金:0;填充:0.5em 0;} < span style=" font - family:宋体;tab-size: 4 " > & # 9 # 9 & # 9←←一个选项卡两个标签# 9 & # 9 & # 9←三个标签# 9 & # 9 & # 9 & # 9←四个选项卡。< / p > < span style=" font - family:宋体;tab-size: 4">←这是一个字符 < span style=" font - family:宋体;</p> . tab-size: 42">&#9←This one has come out too far.</p> . < span style=" font - family:宋体;tab-size: 8">&#9←说!</p>

太懒了;没有“运行代码”):

通过输入&#9在文本中插入制表符,或者(如果您确定文档是UTF-8编码的)按下制表键! 添加空白:预换行;到文本元素的CSS规则,以阻止空格字符(包括制表符)折叠。 添加tab-size: 4;到你的文本元素的CSS规则,以确保你的制表符宽度等于四个标准空格字符。

(在众多的回答和评论中,每一件事都有一些片段和线索,但没有一个像它的措辞那样把它们放在一起来回答这个问题。)

编辑:不幸的是,堆栈代码段将我的Unicode制表符转换为空格!因此,演示的这一部分(第2行)不起作用。如果通过代码格式化器运行代码,可能会遇到类似的问题。&#9避免了这些问题。

<span style="margin-left:64px"></span>  

可以这样考虑:一个制表符等于64个像素。这就是我们用CSS给出的空间。

你还可以使用:

p::before {
    content: "";
    padding-left: 30px;
}

然后用你想到的其他选择器替换p。