如何在 html 中创建制表符缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1068647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create tab indenting in html
提问by Elitmiar
I have a situation as follows
我有如下情况
<body>
Test<br />
test<br />
test1<br />
</body>
<body>
测试<br />
测试<br />
test1<br />
</body>
I need to add a tab after the 2nd test and 3rd test
我需要在第二次测试和第三次测试后添加一个选项卡
so that it looks similar to this.
所以它看起来与此相似。
Test
test
test1
测试
测试
test1
Is there a special HTML entity or special character for TAB. eg. Non-breaking space == & nbsp ;
TAB 是否有特殊的 HTML 实体或特殊字符。例如。不间断空格 ==
thanks
谢谢
采纳答案by annakata
Ye gods, tables?
各位大神，桌子？
Looks like an obvioususe-case for lists, with variable margin and list-style-type: none; seasoned to taste.
看起来像是列表的一个明显用例，具有可变边距和列表样式类型：无；调味。
回答by geowa4
The simplest way I can think of would be to place the text in nested divs. Then add margin to the left of div. It will cascade down, giving you indentation.
我能想到的最简单的方法是将文本放在嵌套的 div 中。然后在 div 的左边添加边距。它会级联下降，给你缩进。
<div id='testing'>
Test1
<div>
Test2
<div>
Test3
</div>
</div>
</div>
With the CSS:
使用 CSS：
#testing div {
margin-left: 10px;/*or whatever indentation size you want*/
}
With those, you'll get a nice tree, no matter how many levels deep you want to go.
有了这些，你会得到一棵漂亮的树，无论你想深入多少层。
EDIT: You can also use padding-leftif you want.
编辑：您也可以padding-left根据需要使用。
回答by Boldewyn
If you really want to use tabs(== tabulator characters), you have to go with the following solution, which I don't recommend:
如果您真的想使用制表符（== 制表符），则必须使用以下解决方案，我不推荐这样做：
<pre>
test
	test
		test
</pre>
or replace the <pre/>with <div style="white-space: pre" />to achieve the same effect as with the pre element. You can even enter a literal tab character instead of the escaped 	.
或替换<pre/>with<div style="white-space: pre" />以达到与 pre 元素相同的效果。您甚至可以输入文字制表符而不是转义的	.
I don't recommend it for most usages, because it is not really semantic, that is, from viewing the HTML source a program cannot deduce any useful information (like, e.g., "this is a heading" or such). You'd be better off using one of the nice margin-leftexamples of the other answers. However, if you'd like to display some stuff like source code or the such, the above solution would do it.
我不推荐它用于大多数用途，因为它不是真正的语义，也就是说，从查看 HTML 源代码中，程序无法推断出任何有用的信息（例如，“这是一个标题”等）。你最好使用margin-left其他答案的一个很好的例子。但是，如果您想显示一些诸如源代码之类的东西，上面的解决方案就可以做到。
Cheers,
干杯，
回答by edeverett
There have been a variety of good and bad answers so far but it seems no-one has addressed the way that you can choose between the solutions.
到目前为止，有各种好的和坏的答案，但似乎没有人解决您可以在解决方案之间进行选择的方式。
The first question to ask is "What is the relationship between the data being displayed?". Once this has been answered it the HTML structure you use should be obvious.
要问的第一个问题是“显示的数据之间有什么关系？” . 一旦回答了这个问题，您使用的 HTML 结构应该是显而易见的。
Please update the question explaining more about the structure of the content you need to display and you should find that you get better answers. At the moment everything from using <pre>to tables might be the best solution.
请更新问题，解释更多有关您需要显示的内容结构的信息，您应该会发现您得到了更好的答案。目前，从使用<pre>到表格的一切都可能是最好的解决方案。
回答by Eugene Yokota
See Making a 'Tab' in HTMLby Neha Sinha:
请参阅Neha Sinha在 HTML 中制作“标签”：
Preformatted
You can put tab characters in your HTML directly if you use what's called “preformatted” text.In HTML, surround text that you want “preformatted” in a pair of “
<pre>” and “</pre>” start and end tags.Tables
You can use a html table so that everything you put within the set of rows(
<tr>) and columns(<td>) shows up the same way. You can very well hide the table borders to show the text alone.Using the
<dd>TagThe
<dd>tag is for formatting definitions. But it also will create a line break and make a tab!
, The Non-Breaking SpaceOne bit of HTML code I used in the table example is the “non-breaking space,” encoded as in HTML. This just gives you some space. Combined with a line break,
<br>, you can create some tab-like effects.
预格式化
如果您使用所谓的“预格式化”文本，则可以直接在 HTML 中放置制表符。在 HTML 中，将要“预格式化”的文本括在一对“
<pre>”和“</pre>”开始和结束标记中。表
你可以使用一个 html 表格，这样你在行（
<tr>）和列（<td>）集合中的所有内容都以相同的方式显示。您可以很好地隐藏表格边框以单独显示文本。使用
<dd>标签该
<dd>标签用于格式化定义。但它也会创建一个换行符并制作一个制表符！
, 不间断空间我在表格示例中使用的一小段 HTML 代码是“不间断空格”，编码为 HTML。这只是给你一些空间。结合换行符 ，
<br>您可以创建一些类似选项卡的效果。
Example
例子
Test<br/>
<pre> </pre>test<br/>
<pre> </pre>test1<br/>
this should render as:
这应该呈现为：
Test
test
test1
回答by Perica Zivkovic
I think that easiest thing to do is to use UL/LI html tags and then to manipulate (and remove if needed) symbols in front of list with CSS.
我认为最简单的方法是使用 UL/LI html 标签，然后使用 CSS 操作（并根据需要删除）列表前面的符号。
Then you get something like:
然后你会得到类似的东西：
- Test
- Test2
- Test 3
- 测试
- 测试2
- 测试 3
回答by Mathias Bynens
If you need to display tabs (tabulator characters), use a PREelement (or any element with the white-space: pre;CSS applied to it).
如果需要显示制表符（制表符），请使用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>
You can also use the HTML entity 	instead of the actual tab character.
您还可以使用 HTML 实体	代替实际的制表符。
回答by ctwheels
I realize this is an old post, however someone may want to use the following list in order to create an indented list (by using a description list)
我意识到这是一篇旧帖子，但是有人可能想要使用以下列表来创建缩进列表（通过使用描述列表）
In my opinion, this is a much cleaner way than many of the other answers here and may be the bestway to go:
在我看来，这比这里的许多其他答案要干净得多，并且可能是最好的方法：
- It does not use a bunch of whitespace characters(which gives little control in terms of formatting for styles)
- It does not use the
<pre>tag, which should only be used for formatting (in my opinion, this should pretty much be a last resort or a special-case use in HTML);<pre>tag is also whitespace-dependent and not CSS dependent when used the way it is intended to be usedw3schoolssays to use the
<pre>element when displaying text with unusual formatting, or some sort of computer code. - description listsallow for more control in terms of formatting and hierarchy
- The answer by @geowa4, I would say, is another great way to accomplish this.
<div>s allow for style control and, depending on use/objective, his answer may be the bestway to go.
- 它不使用一堆空白字符（这在样式格式方面几乎没有控制）
- 它不使用
<pre>标签，它应该只用于格式化（在我看来，这应该是最后的手段或 HTML 中的特殊情况）；<pre>当按照预期使用方式使用时，标签也依赖于空格而不依赖于 CSSw3schools表示在显示格式异常的文本或某种计算机代码时使用该
<pre>元素。 - 描述列表允许在格式和层次结构方面进行更多控制
- 我想说，@geowa4 的回答是实现这一目标的另一种好方法。
<div>s 允许风格控制，根据用途/目标，他的答案可能是最好的方法。
<dl>
<dt>Test</dt>
<dd>
<dl>
<dt>test</dt>
<dd>test1</dd>
</dl>
</dd>
</dl>