Question

我的情况如下

＆LT;身体GT;
测试＆lt; br /＆gt;
测试＆lt; br /＆gt;
test1＆lt; br /＆gt;
＆LT; /体＆GT;

我需要在第二次测试和第三次测试后添加一个标签

所以它看起来与此相似。

测试
测试
TEST1

TAB是否有特殊的HTML实体或特殊字符。例如。不间断的空间==＆amp; nbsp;

感谢

Answer 1

我能想到的最简单的方法是将文本放在嵌套的div中。然后在div的左边添加边距。它将级联下来，给你缩进。

<div id='testing'>
  Test1
  <div>
    Test2
    <div>
      Test3
    </div>
  </div>
</div>

使用CSS：

#testing div {
  margin-left: 10px;/*or whatever indentation size you want*/
}

有了这些，无论你想要多少级别，你都会得到一棵漂亮的树。

编辑：如果需要，您也可以使用padding-left。

Answer 2

如果您真的想使用标签（==制表符字符），则必须使用以下解决方案，我不建议这样做：

<pre>
test
&#x09;test
&#x09;&#x09;test
</pre>

或将<pre/>替换为<div style="white-space: pre" />以获得与pre元素相同的效果。您甚至可以输入文字制表符而不是转义的	。

我不推荐它用于大多数用法，因为它不是真正的语义，也就是说，从查看HTML源代码，程序无法推断出任何有用的信息（例如，“这是一个标题”等）。你最好使用其他答案的一个很好的margin-left例子。但是，如果你想显示一些像源代码这样的东西，上面的解决方案就可以做到。

干杯，

Answer 3

天哪，桌子？

对于列表看起来像明显的用例，具有可变边距和list-style-type：none;经验丰富。

Answer 4

到目前为止，已经有各种各样的好的和坏的答案，但似乎没有人解决你可以在解决方案之间做出选择的方式。

要问的第一个问题是“正在显示的数据之间的关系是什么？”。一旦回答了这个问题，你使用的HTML结构应该是显而易见的。

请更新解释更多有关您需要展示的内容结构的问题，您应该会发现您可以获得更好的答案。目前，使用<pre>到表格的所有内容都可能是最佳解决方案。

Answer 5

见Neha Sinha的Making a 'Tab' in HTML：

预格式化

如果您可以直接在HTML中添加制表符   你使用所谓的“预先格式化”   text.In HTML，环绕你的文本   希望在一对中“预先格式化”   “<pre>”和“</pre>”开始和结束   标签

表

您可以使用html表格，以便将所有内容放在行集（<tr>）和   列（<td>）以相同的方式显示。您可以很好地隐藏表格边框以单独显示文本。

使用<dd>标记

<dd>标记用于格式化定义。但它   也会创造一个换行符和制作   一个标签！

 ，非破碎空间

我在表格示例中使用的一些HTML代码是“不间断的空间”，以HTML格式编码。这只是给你一些空间。结合换行符<br>，您可以创建一些类似标签的效果。

实施例

Test<br/>
<pre>   </pre>test<br/>
<pre>       </pre>test1<br/>

这应该呈现为：

Test
    test
        test1

Answer 6

我认为最简单的方法是使用UL / LI html标签，然后使用CSS操作（并在需要时删除）列表前面的符号。

然后你得到类似的东西：

测试
的Test2
- 测试3

More info + working example you can try out.

Answer 7

如果您需要显示标签（制表符字符），请使用PRE元素（或应用了white-space: pre; CSS的任何元素）。

<!doctype html>
<html>
 <head>
  <title>Test</title>
  <style type="text/css">
   pre { white-space: pre; }
  </style>
 </head>
 <body>
  <p>This is a normal paragraph, blah blah blah.</p>
  <pre>This is preformatted text contained within a <code>PRE</code> element. Oh, and here are some tab characters, each of which are displayed between two arrows: ← → ← → ← → ← →</pre>
 </body>
</html>

您还可以使用HTML实体	代替实际的制表符。

Answer 8

我意识到这是一篇旧帖子，但有人可能想使用以下列表来创建缩进列表（使用 description list ）

在我看来，这是一个比其他许多答案更清晰的方式，可能是最好的方式：

它没有使用一堆空格字符（在格式化方式方面几乎无法控制）
它不使用<pre>标记，它只应用于格式化（在我看来，这应该是HTML中的最后手段或特殊情况）; <pre>标记在依赖于空格时依赖于空格，并且在使用它时的方式不依赖于CSS

w3schools在显示带有异常格式的文本或某种计算机代码时，使用<pre>元素。

描述列表允许在格式和层次结构方面进行更多控制

我想说，@ geowa4的答案是实现这一目标的另一个好方法。 <div>允许样式控制，并且根据用途/目标，他的回答可能是最佳方式。

＆＃13;
＆＃13;
<dl> <dt>Test</dt> <dd> <dl> <dt>test</dt> <dd>test1</dd> </dl> </dd> </dl>
＆＃13;
＆＃13;
＆＃13;

Answer 9

我不喜欢使用 CSS 来模拟 Tab 字符。
对于缩进，是的，一定要使用 CSS - 但不要用于制表符。

对于单个 Tab，我将替换为“   ”（4 个空格）。
这类似于用于格式化您的问题以供显示的内容。
这样做的额外好处是（如果有人复制了您的文本）
粘贴到 Word 或记事本中时会保留间距。

示例：

Test<br />
&nbsp; &nbsp; test<br />
&nbsp; &nbsp; &nbsp; &nbsp; test1

注意：如果您的文本位于 <pre> 标签中，那么@Boldewyn 的答案是更好的选择。
请记住，<pre> 标记中的文本可能会与预期不同。

如何在html中创建制表符缩进

9 个答案:

预格式化

表

使用`<dd>`标记

` `，非破碎空间

实施例

如何在html中创建制表符缩进

9 个答案:

预格式化

表

使用<dd>标记

&nbsp;，非破碎空间

实施例

使用`<dd>`标记

` `，非破碎空间