我有一个如下的情况
<body>
Test<br />
test<br />
test1<br />
</body>
我需要在第二个`test`和第三个`test`之后添加一个制表符
使其看起来类似于这样。
Test
test
test1
是否有特殊的HTML实体或特殊字符可以代表制表符？例如，非换行空格==
谢谢
9个回答
26
我能想到的最简单的方法是将文本放在嵌套的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。
- geowa4
9
2+1 提到无限级深度。这非常有用，对于动态内容来说效果更佳。 - Sam Becker
我认为列表比div更好，但这只是一个主观的话题。+1 - annakata
3这个问题是关于如何在HTML页面上显示制表符，而不是如何使用CSS来伪造它们的。 - Mathias Bynens
@annakata，CSS解决方案更合理吗？这取决于情况。由于问题是如何显示制表符字符，我猜他实际上想要显示字符，而不仅仅是缩进一些文本。这有很大的区别。 - Mathias Bynens
我不知道为什么这个或者列表选项不是被接受的答案 - 使用列表或div显然是最好的选择。 - Thomas Owens
显示剩余4条评论
13
如果您真的想使用制表符（即制表符字符），您必须采用以下解决方案，但我不推荐：
<pre>
test
	test
		test
</pre>
<pre/> 替换为 <div style="white-space: pre" />，从而实现与 pre 元素相同的效果。您甚至可以输入一个字面制表符，而不是转义的 	。我不建议在大多数用途中使用它，因为它并不真正语义化，也就是说，从查看 HTML 源代码的程序不能推断出任何有用信息（比如“这是标题”之类的）。您最好使用其他答案中美好的
margin-left 示例之一。但是，如果您想要显示一些源代码或类似的东西，上述解决方案将做到。祝好，
- Boldewyn
8
我的天啊，表格？
看起来像是列表的一个明显应用场景，使用可变间距和列表样式类型：无；按照口味调味即可。
- annakata
1
5不明显。由原帖作者提供的例子过于含糊，无法确定它是列表数据还是其他什么东西。 - Quentin
5
请查看Neha Sinha的《如何在HTML中创建“Tab”》：
预格式化
如果您使用所谓的“预格式化”文本，可以直接在HTML中放置制表符。在HTML中，用一对“
<pre>”和“</pre>”开始和结束标记来包含您想要“预格式化”的文本。表格
可以使用HTML表格，这样您放入行(
<tr>)和列(<td>)中的所有内容都会以相同的方式显示。您可以将表格边框隐藏起来，仅显示文本。使用
<dd>标签
<dd>标签用于格式化定义。但它也会创建换行和制表符！
，不间断空格在表格示例中我使用的一个HTML代码是“不间断空格”，在HTML中编码为 。这只是给您一些空间。结合换行符，
<br>，您可以创建一些类似于制表符的效果。
示例
Test<br/>
<pre> </pre>test<br/>
<pre> </pre>test1<br/>
这应该呈现为：
Test
test
test1
- Eugene Yokota
6
这里完全不需要使用pre，更好的做法是基于em单位向嵌套元素添加padding-left。 - annakata
@annakata，在这个问题上有不止一种解决方法。我个人更喜欢使用CSS的方式，但也可能存在过度或无法实现的情况。我认为pre是一个快速的hack。 - Eugene Yokota
这个答案不值得被接受，特别是因为提问者甚至没有使用这种方法来解决他的问题。 - Thomas Owens
请勿使用此答案作为可接受的解决方案。使用pre、定义列表和/或不间断空格选项完全不适合创建“选项卡”。George IV的答案是最相关的。 - Metro Smurf
嘿，要给@annakata点个赞。那个解决方案也很有道理。 - geowa4
我不知道为什么这个解决方案被踩了。如果你在一个Web应用程序中使用编辑器，并且想要在一个普通的div中显示内容，那么pre是正确的选择。是的，你应该使用表格或列表（完全同意！）但有些用户很固执，想要像在Word中一样使用制表符...你可以通过编程方式转换制表符，但这并不总是像听起来那么容易。 - thomasvdb
5
到目前为止，已经有许多好的和不好的答案，但似乎没有人解决如何选择解决方案的问题。首先要问的问题是“所显示的数据之间的关系是什么？”一旦回答了这个问题，您应该很容易看出需要使用的HTML结构。请更新问题，更详细地说明您需要显示的内容的结构，您会发现得到更好的答案。目前，从使用
到表格可能是最佳解决方案。
- edeverett
1
最佳答案。可能有10或15个正确的解决方案，但OP在这个问题上维护质量做得非常差。 - cherouvim
3
- Perica Zivkovic
2
如果您需要显示制表符，请使用
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实体	代替实际的制表符。
- Mathias Bynens
4
或者任何带有
white-space: nowrap; 的块级元素。 - l0b0pre标签不会破坏很多格式并强制使用丑陋的等宽字体吗？ - Sam Becker
1这个网站上的代码块中的代码都在预格式标签中。它们看起来很混乱和丑陋吗？ - Macha
1好的，第一部分并没有什么帮助，但 是一个正确的解决方案，所以不理解为什么会被踩。 - pihentagy
1
我不喜欢使用CSS来模拟制表符。
对于缩进，可以使用CSS - 但是不能用于制表符。
对于单个制表符，我会用"
这类似于用于格式化问题的内容。
这样做的额外好处是（如果有人复制您的文本）
它将保留粘贴到Word或记事本中时的间距。
示例：
注意：如果您的文本在
请记住，
对于缩进，可以使用CSS - 但是不能用于制表符。
对于单个制表符，我会用"
"（4个空格）来替换。这类似于用于格式化问题的内容。
这样做的额外好处是（如果有人复制您的文本）
它将保留粘贴到Word或记事本中时的间距。
示例：
Test<br />
test<br />
test1<pre>标签中，则@Boldewyn的答案是更好的选择。请记住，
<pre>标签中的文本可能与预期不同。- MikeTeeVee
0
我知道这是一篇旧帖子，但是有人可能想使用以下列表来创建一个缩进的列表（通过使用description list）
在我看来，这是比其他答案更加简洁的方式，也许是最好的选择：
- 它不使用大量的空格字符（这在样式格式方面控制很少）
- 它不使用
<pre>标签，该标签仅应用于格式化（在我看来，这几乎应该是HTML中的最后一种选择或特殊情况使用）；<pre>标签也依赖于空格而不是CSS，当按照预期使用时 - 描述列表允许更多的格式和层次结构控制
- @geowa4的答案，我认为，是另一种实现这一目标的好方法。
<div>允许样式控制，并且根据使用/目标，他的答案可能是最佳选择。
w3schools建议在显示具有不寻常格式或某种计算机代码的文本时使用
<pre>元素。
<dl>
<dt>Test</dt>
<dd>
<dl>
<dt>test</dt>
<dd>test1</dd>
</dl>
</dd>
</dl>- ctwheels
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接