Wie erstelle ich Tab-Einzug in HTML

8

Ich habe eine Situation wie folgt

& lt; Körper & gt;
Test & lt; br / & gt; Test & lt; br / & gt; test1 & lt; br / & gt; & lt; / body & gt;

Ich muss nach dem 2. Test und dem 3. Test ein Tab hinzufügen

, damit es ähnlich aussieht.

Test
testen
        test1

Gibt es eine spezielle HTML-Entität oder ein Sonderzeichen für TAB? z.B. Nicht brechendes Leerzeichen == & amp; nbsp;

Danke

    
Roland 01.07.2009, 11:37
quelle

8 Antworten

7

Ihr Götter, Tische?

Sieht wie ein offensichtlicher Anwendungsfall für Listen aus, mit variablem Rand und List-style-type: none; gewürzt nach Geschmack.

    
annakata 01.07.2009, 11:46
quelle
22

Der einfachste Weg, den ich mir vorstellen kann, wäre, den Text in verschachtelte divs zu platzieren. Dann füge den Rand links von div hinzu. Es wird kaskadieren und Ihnen Einrückung geben.

%Vor%

Mit dem CSS:

%Vor%

Mit diesen erhalten Sie einen schönen Baum, egal wie tief Sie gehen möchten.

BEARBEITEN: Sie können padding-left auch verwenden, wenn Sie möchten.

    
geowa4 01.07.2009 11:44
quelle
9

Wenn Sie wirklich Tabs (== Tabulatorzeichen) verwenden möchten, müssen Sie mit der folgenden Lösung gehen, die ich nicht empfehle:

%Vor%

oder ersetzen Sie <pre/> durch <div style="white-space: pre" /> , um den gleichen Effekt wie mit dem pre-Element zu erzielen. Sie können sogar ein Literalzeichen anstelle des Escaped &#x09; eingeben.

Ich empfehle es nicht für die meisten Verwendungen, weil es nicht wirklich semantisch ist, das heißt, aus der Betrachtung der HTML-Quelle kann ein Programm keine nützliche Information ableiten (wie z.B. "dies ist eine Überschrift" oder so). Du solltest besser eines der netten margin-left Beispiele der anderen Antworten verwenden. Wenn Sie jedoch etwas wie Quellcode oder dergleichen anzeigen möchten, würde die obige Lösung es tun.

Prost,

    
Boldewyn 01.07.2009 13:21
quelle
5

Es gab bisher eine Vielzahl von guten und schlechten Antworten, aber es scheint, dass niemand die Art und Weise angesprochen hat, wie Sie zwischen den Lösungen wählen können.

Die erste Frage ist "Welche Beziehung besteht zwischen den angezeigten Daten?" . Sobald dies beantwortet wurde, sollte die HTML-Struktur, die Sie verwenden, offensichtlich sein.

Bitte aktualisieren Sie die Frage, in der Sie mehr über die Struktur des anzuzeigenden Inhalts erfahren, und Sie sollten feststellen, dass Sie bessere Antworten erhalten. Im Moment kann alles von der Verwendung von <pre> zu Tabellen die beste Lösung sein.

    
edeverett 01.07.2009 12:12
quelle
3

Ich denke, dass es am einfachsten ist, UL / LI-HTML-Tags zu verwenden und dann die Symbole vor der Liste mit CSS zu manipulieren (und bei Bedarf zu entfernen).

Dann bekommst du etwas wie:

  • Test
  • Test2
    • Test 3

Weitere Informationen + Arbeitsbeispiel können Sie ausprobieren.

    
Perica Zivkovic 01.07.2009 11:46
quelle
3

Siehe Erstellen eines Tabs in HTML von Neha Sinha:

  

Vorformatiert

     

Sie können Tab-Zeichen direkt in Ihren HTML-Code einfügen, wenn   Sie verwenden, was "vorformatiert" genannt wird   text.In HTML, Surround-Text, den Sie   will "vorformatiert" in einem Paar   "% Co_de%" und " <pre> " beginnen und enden   Tags.

     

Tabellen

     

Sie können eine HTML-Tabelle verwenden, so dass alles, was Sie in den Satz von Zeilen ( </pre> ) und   Spalten ( <tr> ) erscheinen auf die gleiche Weise. Sie können die Tabellenrahmen sehr gut ausblenden, um den Text allein anzuzeigen.

     

Verwendung des <td> -Tags

     

Das <dd> -Tag dient zum Formatieren von Definitionen. Aber es   wird auch einen Zeilenumbruch erstellen und machen   ein Tab!

     

<dd> , Der nichtbrechende Platz

     

Ein Bit HTML-Code, den ich im Beispiel der Tabelle verwendet habe, ist der "non-breaking space", der wie in HTML kodiert ist. Das gibt dir nur etwas Platz. In Kombination mit einem Zeilenumbruch, &nbsp; , können Sie tab-ähnliche Effekte erstellen.

Beispiel

%Vor%

Dies sollte wie folgt dargestellt werden:

%Vor%     
Eugene Yokota 01.07.2009 11:42
quelle
2

Wenn Sie Registerkarten (Tabulatorzeichen) anzeigen müssen, verwenden Sie ein PRE -Element (oder ein beliebiges Element, auf das das white-space: pre; CSS angewendet wurde).

%Vor%

Sie können auch die HTML-Entity &#x09; anstelle des eigentlichen Tab-Zeichens verwenden.

    
Mathias Bynens 01.07.2009 11:39
quelle
0

Ich weiß, dass dies ein alter Beitrag ist, aber jemand möchte vielleicht die folgende Liste verwenden, um eine eingerückte Liste zu erstellen (indem man ein Beschreibungsliste )

Meiner Meinung nach ist dies ein viel saubererer Weg als viele der anderen Antworten hier und könnte der beste Weg sein:

  • Es werden keine Whitespace-Zeichen verwendet (was die Formatierung von Styles wenig beeinflusst)
  • Es verwendet nicht das <pre> -Tag, das nur für die Formatierung verwendet werden sollte (meiner Meinung nach sollte dies ein letzter Ausweg oder ein Sonderfall in HTML sein); <pre> -Tag ist ebenfalls whitespace-abhängig und nicht CSS-abhängig, wenn es so verwendet wird, wie es verwendet werden soll
      

    w3schools sagt zu , dass Sie das Element <pre> verwenden, wenn Sie Text mit ungewöhnlichen Formatierungen oder Ähnlichem anzeigen Art von Computercode .

  • Beschreibungslisten ermöglichen mehr Kontrolle in Bezug auf Formatierung und Hierarchie
  • Die Antwort von @ geowa4, würde ich sagen, ist ein weiterer guter Weg, dies zu erreichen. <div> s ermöglichen eine Stilkontrolle und je nach Verwendung / Zielsetzung kann seine Antwort der beste Weg
  • sein.


%Vor%
    
ctwheels 18.01.2016 15:52
quelle

Tags und Links