Wie erstelle ich einen tab Einrücken html

Habe ich die situation wie folgt

<body>

Test<br />

test<br />

test1<br />

</body>

Ich hinzufügen müssen, um einen tab nach dem 2. test und 3. test

so, dass es etwa so aussieht.

Test

    test

        test1

Gibt es ein spezielles HTML-Entität oder Besondere Zeichen für die TAB. zB. Non-breaking space == & nbsp ;

Dank

  • Ich denke, ich werde mich mit der Liste und verwenden Sie dann list-style-type: none; im css zu verstecken, die Kugeln
  • wenn Sie sich für eine Liste, warum akzeptieren Sie eine Antwort, die nicht einmal erwähnt-Listen?
  • Bitte, so eine der Antworten, berät, aktualisieren Sie die Frage über die Daten-Struktur gekennzeichnet. Die Präsentation sollte nicht betrachtet werden, bis die Struktur bekannt ist.
InformationsquelleAutor Roland | 2009-07-01
  1. 8

    Ihr Götter, Tabellen?

    Sieht aus wie ein offensichtlich Anwendungsfall für Listen mit Variablen Rand-und list-style-type: none; abgeschmeckt.

    • +1 für die Listen, es ist offensichtlich.
    • Es ist nicht offensichtlich. Das Beispiel des OP ist zu vage, zu sagen, wenn es ist die Liste Daten oder etwas anderes.
    • Ist es nicht offensichtlich.
    InformationsquelleAutor annakata
  2. 23

    Der einfachste Weg, den ich mir denken kann, wäre der text in verschachtelten divs. Dann fügen Sie Rand auf der linken Seite div. Es breitet sich nach unten, so dass Sie die Einrückung.

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

    Mit CSS:

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

    Mit denen wirst, bekommst du einen schönen Baum, egal, wie viele Ebenen tief Sie gehen wollen.

    BEARBEITEN: Sie können auch padding-left wenn Sie wollen.

    • +1 Für die Erwähnung einer unendlichen Ebene Tiefe. Es könnte sehr nützlich sein, plus es würde besser funktionieren, für dynamische Inhalte.
    • Ich sage Liste über div, aber zumindest ist ein subjektives Gespräch. +1
    • Die Frage war, um Anzeige tab-Zeichen in HTML-Seiten, nicht wie fake Sie mit CSS...
    • lächerlich die Sorge, CSS ist eine mehr als vernünftige Annahme gegeben, HTML. Deutlich weniger als 1% der Zuschauer nicht CSS.
    • Listen sind toll, aber für unendliche Tiefe, es ist viel einfacher, nur werfen Sie in ein div unterhalb des übergeordneten Knotens. Und xpath-traversal ist reduziert, da Sie nicht mehr hinzufügen ul alle über dem Platz. @Mathias Bynens Meine Antwort ist besser bei der Lösung seiner problem als die Verwendung von tab-Zeichen.
    • ew divs - warum nicht wählen Sie etwas, dass die Semantik, vielleicht eine Liste oder eine Tabelle, abhängig von der Art der Daten?
    • eine CSS-Lösung sinnvoller? Das hängt von der situation. Da die Frage war, wie die Anzeige Registerkarte Zeichen ich vermute, er will wirklich die Zeichen angezeigt, nicht nur Einrücken von text. Es ist ein großer Unterschied.
    • Ich habe keine Ahnung, warum dieser oder der list-option wird nicht akzeptiert Antwort - mit Hilfe einer Liste oder divs sind eindeutig die besten Möglichkeiten.
    • Schou-Rode: divs für Einfachheit

    InformationsquelleAutor geowa4
  3. 10

    Wenn Sie wirklich wollen, zu verwenden tabs (== tabulator-Zeichen), fahren Sie mit der folgenden Lösung, die ich nicht empfehle:

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

    oder ersetzen Sie die <pre/> mit <div style="white-space: pre" /> um den gleichen Effekt erzielen, wie mit dem pre-element. Sie können sogar geben Sie eine wörtliche tab-Zeichen anstelle von Escape &#x09;.

    Ich nicht empfehlen es für die meisten Anwendungen, denn es ist nicht wirklich semantische, das heißt, eine Anzeige des HTML-source-Programm nicht ableiten, jede nützliche Informationen (wie, z.B., "dies ist eine überschrift" oder so). Sie wären besser dran mit einem der schönen margin-left Beispiele für die anderen Antworten. Allerdings, wenn Sie möchten, um anzuzeigen, ein paar Sachen wie source code oder solche, die oben genannte Lösung würde es tun.

    Cheers,

    InformationsquelleAutor Boldewyn
  4. 5

    Gab es eine Vielzahl von guten und schlechten Antworten bisher, aber es scheint, niemand hat Sie an der Art und Weise, dass Sie können wählen zwischen den Lösungen.

    Die erste Frage ist "Was ist die Beziehung zwischen den Daten angezeigt werden?". Sobald diese beantwortet worden ist es die HTML-Struktur, die Sie verwenden, sollte offensichtlich sein.

    Bitte aktualisieren Sie die Frage erklären, mehr über die Struktur der Inhalte, die Sie anzeigen möchten, und Sie sollten feststellen, dass Sie bessere Antworten. Im moment alles von der Nutzung <pre> Tabellen vielleicht die beste Lösung sein.

    • Beste Antwort. Es kann 10 oder 15 richtige Lösungen, aber OP hat einen sehr schlechten job halten die Qualität in dieser Frage.
    InformationsquelleAutor edeverett
  5. 3

    Ich denke, die einfachste Sache zu tun ist die Verwendung von UL/LI-html-tags und dann zu Bearbeiten (und löschen, wenn nötig) die Symbole vorne in der Liste mit CSS.

    Dann bekommen Sie etwas wie:

    • Test
    • Test2
      • Test 3

    Mehr info + Beispiel arbeiten, die Sie ausprobieren können.

    InformationsquelleAutor Perica Zivkovic
  6. 3

    Sehen Macht einen 'Reiter' HTML von Neha Sinha:

    Vorformatiert

    Sie können tab-Zeichen in Ihren HTML-Code direkt, wenn
    Sie verwenden, was heißt "Vorformatiert"
    text.In HTML -, text umschließen, dass Sie
    wollen "Vorformatiert" in ein paar
    "<pre>" und "</pre>" start-und end -
    tags.

    Tabellen

    Können Sie eine html-Tabelle, so dass alles, was Sie innerhalb der Gruppe von Zeilen(<tr>) und
    Spalten(<td>) zeigt sich die gleiche Weise. Sie kann das sehr gut ausblenden und die Tabelle Grenzen zu zeigen, die mit text allein.

    Mit der <dd> Tag

    Den <dd> tag ist für die Formatierung von Definitionen. Aber es
    auch eine Linie brechen und machen
    ein tab!

    &nbsp; Das Non-Breaking Space

    Ein wenig HTML-code, den ich verwendet in die Tabelle ein Beispiel ist die "non-breaking space" codiert, wie in HTML. Dies nur gibt Ihnen einen Raum. Kombiniert mit einem Zeilenumbruch <br> werden, können Sie einige tab-ähnliche Effekte.

    Beispiel

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

    dies Rendern soll, als:

    Test
    test
        test1
    • pre ist völlig unnötig hier, weit besser " padding-left basierend auf em-Einheiten zu verschachtelten Elementen
    • es gibt mehr als einen Weg, um die Haut der Katze auf diese ein. Ich würde persönlich lieber die css Weg, aber es könnte Situationen geben, die ein overkil, oder einfach nicht möglich. pre denke ich, ist ein quick-hack.
    • das war die passende Antwort von dir....esp mine!
    • Diese Antwort nicht verdient akzeptiert zu werden, zumal der Fragesteller gar nicht auf diese Methode verwenden, um sein problem zu lösen.
    • NICHT verwenden Sie diese Antwort als akzeptierte Lösung. Die Möglichkeiten der Verwendung von vorgefertigten, definition von Listen und/oder non-breaking-spaces ist völlig ungeeignet für die Erstellung von "tabs". George IV ' s Antwort ist mit Abstand die wichtigsten.
    • Hey, geben Sie @annakata Kredit. Diese Lösung macht viel Sinn auch.
    • Ich weiß nicht, warum diese Lösung wurde downvoted. Wenn Sie mit einem editor (in einer Webanwendung), und wollen Sie den Inhalt danach in regelmäßigen div, pre ist der Weg zu gehen. Ja, sollten Sie Tabellen oder Listen (völlig zugestimmt!) aber einige Nutzer sind stur und möchten einen Reiter, wie Sie in Word... die Sie umwandeln könnten die tabs programmatisch, aber das ist nicht immer so einfach, wie es klingt.

    InformationsquelleAutor Eugene Yokota
  7. 2

    Wenn Sie brauchen, um Registerkarten anzuzeigen (tabulator-Zeichen), verwenden Sie eine PRE element (oder ein beliebiges element mit der white-space: pre; CSS angewendet).

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

    Können Sie auch die HTML-entity &#x09; anstelle der tatsächlichen tab-Zeichen.

    • Oder jedes block-element mit white-space: nowrap;
    • Nicht das pre-tag vermasseln eine Menge von Formatierungen und Kraft eine hässliche einheitliche Zeichenbreite schriftart?
    • Der code in codeblocks auf dieser Website sind in pre-tags. Sind Sie geschraubt und hässlich?
    • Ok, der erste Teil ist nicht hilfreich, aber die &#x09; ist eine richtige Lösung, so nicht verstehen, den downvote.
    InformationsquelleAutor Mathias Bynens
  8. 0

    Ich weiß, dies ist eine alte post, aber jemand kann wollen, verwenden Sie die folgende Liste, um eine Liste eingerückt (mit einem Beschreibung Liste)

    Meiner Meinung nach ist dies eine viel bessere Möglichkeit, als viele der anderen Antworten hier und kann die besten Weg zu gehen:

    • Es nicht mit einem Haufen whitespace-Zeichen (die gibt wenig Kontrolle in Bezug auf die Formatierung bei Formatvorlagen)
    • Es nicht die <pre> tag, das sollte nur sein verwendet für die Formatierung (in meiner Meinung nach, dürfte das so ziemlich das Letzte Mittel sein oder ein Spezial-Fall verwenden Sie in HTML); <pre> tag ist auch whitespace-abhängigen und nicht-CSS-abhängig, wenn verwendet, wie es verwendet werden soll

      w3schools sagt verwenden Sie die <pre> element bei der Anzeige von text mit ungewöhnlichen Formatierung, oder irgendeine Art von computer-code.

    • Beschreibung listet ermöglichen mehr Kontrolle in Bezug auf die Formatierung und Hierarchie
    • Die Antwort von @geowa4, würde ich sagen, ist ein weiterer guter Weg, dies zu erreichen. <div>s erlauben, für die style-Steuerung und, abhängig von der Nutzung/dem Ziel, seine Antwort kann die besten Weg zu gehen.

    HTML:

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

    InformationsquelleAutor ctwheels
Schreibe einen Kommentar