Comment puis-je créer l'onglet mise en retrait dans le html

J'ai une situation comme suit

<body>
Test<br />
test<br />
test1<br />
</body>

J'ai besoin d'ajouter un onglet après le test 2 et 3ème essai

de sorte qu'il ressemble à ceci.

Test
test
test1

: Il y a une entité HTML ou un caractère spécial pour l'ONGLET. par exemple. L'espace insécable == & nbsp ;

grâce

Je pense que je vais régler avec la liste et ensuite utiliser list-style-type: none; dans le css pour cacher les balles
si vous vous installez sur une liste, pourquoi avez-vous accepté une réponse qui ne fait même pas mention de listes?
S'il vous plaît, comme une des réponses conseille, mise à jour de la question à propos de la structure des données sont marqués. La présentation ne devrait pas être considérée jusqu'à ce que la structure est connue.

OriginalL'auteur Roland | 2009-07-01

  1. 8

    Fichtre, tables?

    Ressemble à un évident de cas d'utilisation pour les listes, avec une marge variable et list-style-type: none; assaisonné à votre goût.

    +1 pour les listes, c'est évident.
    Il n'est pas évident. L'exemple donné par l'OP est trop vague pour dire si c'est la liste de données ou quelque chose d'autre.
    Il n'est pas évident.

    OriginalL'auteur annakata

  2. 22

    Le moyen le plus simple je pense, serait de placer le texte dans les divs. Ajoutez ensuite la marge de gauche de la div. Il sera en cascade vers le bas, vous donnant l'indentation.

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

    Avec le CSS:

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

    Avec ceux-ci, vous aurez un bel arbre, peu importe le nombre de niveaux que vous voulez aller.

    EDIT: Vous pouvez également utiliser padding-left si vous le souhaitez.

    +1 Pour la mention de l'infini au niveau de la profondeur. Il pourrait s'avérer très utile, plus il serait mieux travailler pour le contenu dynamique.
    Je dis liste de plus de div, mais au moins c'est subjectif conversation. +1
    La question était d'afficher les caractères de tabulation dans les pages HTML, pas sur la façon de simuler vous-même à l'aide de CSS...
    ridicule préoccupation, le CSS n'est plus une hypothèse raisonnable, étant donné HTML. Considérablement moins de 1% de votre auditoire n'ont pas de CSS.
    Les listes sont très bien, mais pour une profondeur infinie, il est beaucoup plus facile de simplement le jeter dans un div en dessous du nœud parent. Et xpath de la traversée à l'est réduit, car vous n'avez plus à ajouter ul tous sur la place. @Mathias Bynens, Ma réponse est mieux à même de résoudre son problème que d'utiliser des caractères de tabulation.

    OriginalL'auteur geowa4

  3. 10

    Si vous voulez vraiment utiliser onglets (== les caractères de tabulation), vous devez aller avec la solution suivante, que je ne recommande pas:

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

    ou de remplacer le <pre/> avec <div style="white-space: pre" /> pour obtenir le même effet qu'avec le pré de l'élément. Vous pouvez même entrer un littéral caractère de tabulation au lieu de l'échappé &#x09;.

    Je ne le recommande pas pour la plupart des usages, car il n'est pas vraiment sémantique, qui est, à partir de l'affichage de la source HTML d'un programme ne peut pas en déduire toutes les informations utiles (comme, par exemple, "ceci est un titre" ou ces). Vous feriez mieux d'utiliser un de la belle margin-left exemples des autres réponses. Cependant, si vous souhaitez afficher certains trucs comme le code source ou le tel, la solution ci-dessus.

    Acclamations,

    OriginalL'auteur Boldewyn

  4. 5

    Il y a eu une variété de bonnes et de mauvaises réponses jusqu'à présent, mais il semble que personne n'a abordé la façon dont vous pouvez choisir entre les solutions.

    La première question à se poser est "Quelle est la relation entre les données affichées?". Une fois que cela a été répondu la structure HTML que vous utilisez doit être évident.

    Veuillez mettre à jour la question en expliquant plus sur la structure du contenu dont vous avez besoin pour afficher et vous devriez trouver que vous obtenez la meilleure des réponses. Pour le moment tout à l'aide de <pre> pour les tables pourraient être la meilleure solution.

    Meilleure réponse. Il y a peut être 10 ou 15 bonnes solutions, mais les OP ont fait un très mauvais travail de maintien de la qualité dans cette question.

    OriginalL'auteur edeverett

  5. 3

    Je pense que la meilleure chose à faire est d'utiliser UL/LI balises html et ensuite à manipuler (et supprimer si nécessaire) les symboles en face de liste avec les CSS.

    Ensuite, vous obtenez quelque chose comme:

    • Test
    • Test2
      • Test 3

    Plus d'info + d'exemple, vous pouvez essayer.

    OriginalL'auteur Perica Zivkovic

  6. 3

    Voir Faire un "Onglet" dans le HTML par Neha Sinha:

    Préformaté

    Vous pouvez mettre des caractères de tabulation dans votre code HTML directement si
    vous utilisez ce qu'on appelle “préformaté”
    texte.En HTML, entourez le texte que vous
    souhaitez “préformaté” dans une paire de
    “<pre>” et “</pre>” de début et de fin
    les balises.

    Tables

    Vous pouvez utiliser un tableau html, de sorte que tout ce que vous mettez dans l'ensemble de lignes(<tr>) et
    les colonnes(<td>) se présente de la même manière. Vous pouvez très bien masquer les bordures de la table pour afficher le texte seul.

    À l'aide de la <dd> Tag

    La <dd> balise de mise en forme des définitions. Mais il
    permettra aussi de créer un saut de ligne et de faire
    un onglet!

    &nbsp;, L'Espace Insécable

    Un peu de code HTML que j'ai utilisé dans l'exemple de table est le “non-breaking space”, encodé en HTML. Cela vous donne juste un peu d'espace. Combiné avec un saut de ligne, <br>, vous pouvez créer une certaine onglet effets.

    Exemple

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

    cela devrait rendre:

    Test
    test
        test1
    pré est totalement inutile ici, de loin préférable d'ajouter un padding-left basé sur em unités pour éléments imbriqués
    il n'y a plus d'une façon à la peau du chat sur celui-ci. Je serais personnellement préfèrent le css façon, mais il pourrait y avoir des cas, c'est un overkil, ou tout simplement pas possible. avant je pense que c'est une rapide hack.
    c'était la réponse la plus appropriée de chacuns....esp mine!
    Cette réponse ne mérite pas d'être accepté, surtout depuis que le demandeur n'a même pas utiliser cette méthode pour résoudre son problème.
    NE PAS se servir de cette réponse comme une solution retenue. Les options de l'aide de pré, des listes de définition et/ou d'espaces insécables est complètement inapproprié pour la création de 'onglets'. George IV de réponse est de loin la plus pertinente.

    OriginalL'auteur Eugene Yokota

  7. 2

    Si vous avez besoin d'onglets d'affichage (caractères de tabulation), utiliser un PRE élément (ou d'un élément quelconque, avec la white-space: pre; CSS appliquée).

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

    Vous pouvez également utiliser les entités HTML &#x09; au lieu du véritable caractère de tabulation.

    Ou tout élément de bloc avec white-space: nowrap;
    Ne pas le pré tag vis beaucoup de mise en forme et de la force d'un vilain caractère uniforme de la largeur de la police?
    Le code de la codeblocks sur ce site sont en pré-tags. Sont-ils vissé vers le haut et laid?
    Ok, la première partie n'est pas utile, mais l' &#x09; est une bonne solution, afin de ne pas comprendre le downvote.

    OriginalL'auteur Mathias Bynens