How do I create tab indenting in html

2019-03-19 02:32发布

站内文章 / 前沿技术
17 0 0

问题:

I have a situation as follows

<body>
Test<br />
test<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

Is there a special HTML entity or special character for TAB. eg. Non-breaking space == & nbsp ;

thanks

回答1:

Ye gods, tables?

Looks like an obvious use-case for lists, with variable margin and list-style-type: none; seasoned to taste.



回答2:

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 id='testing'>
  Test1
  <div>
    Test2
    <div>
      Test3
    </div>
  </div>
</div>

With the 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-left if you want.



回答3:

If you really want to use tabs (== tabulator characters), you have to go with the following solution, which I don't recommend:

<pre>
test
&#x09;test
&#x09;&#x09;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 &#x09;.

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-left examples 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.

Cheers,



回答4:

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.

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.



回答5:

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.

Then you get something like:

  • Test
  • Test2
    • Test 3

More info + working example you can try out.



回答6:

See Making a 'Tab' in HTML by Neha Sinha:

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> Tag

The <dd> tag is for formatting definitions. But it also will create a line break and make a tab!

&nbsp;, The Non-Breaking Space

One 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.

Example

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

this should render as:

Test
    test
        test1


回答7:

If you need to display tabs (tabulator characters), use a PRE element (or any element with the white-space: pre; CSS applied to it).

<!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 &#x09; instead of the actual tab character.



回答8:

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 best way 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 used

    w3schools says to use the <pre> element when displaying text with unusual formatting, or some sort of computer code.

  • description lists allow 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 best way to go.


<dl>
  <dt>Test</dt>
  <dd>
    <dl>
      <dt>test</dt>
      <dd>test1</dd>
    </dl>
  </dd>
</dl>



标签： html xhtml
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~