Cum creez indentarea filelor în html (Programare, Html, Xhtml)

Elitmiar a intrebat.

Am o situație după cum urmează

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

Am nevoie să adaug o filă după al doilea test și al treilea test

astfel încât să arate asemănător cu acesta.

Test
    test
        test1

Există o entitate HTML specială sau un caracter special pentru TAB. ex. spațiu fără întrerupere == & nbsp ;

mulțumesc

Comentarii

  • Cred că mă voi mulțumi cu list și apoi voi folosi list-style-type: none; în css pentru a ascunde bullets –  > Por Elitmiar.
  • dacă te mulțumești cu lista, de ce ai acceptat un răspuns care nici măcar nu menționează listele? –  > Por geowa4.
  • Te rog, așa cum te sfătuiește unul dintre răspunsuri, actualizează întrebarea despre structura de date care se marchează. Prezentarea nu ar trebui să fie luată în considerare până nu se cunoaște structura. –  > Por Quentin.
8 răspunsuri
annakata

Doamne ferește, tabele?

Seamănă cu un evident utilizare evidentă pentru liste, cu marjă variabilă și list-style-type: none; asezonate după gust.

Comentarii

  • Nu este evident. Exemplul dat de OP este prea vag pentru a spune dacă este vorba de date de listă sau de altceva. –  > Por Quentin.
geowa4

Cel mai simplu mod la care mă pot gândi ar fi să plasezi textul în div-uri imbricate. Apoi să adaugi marjă în stânga div-ului. Aceasta va coborî în cascadă, oferindu-ți indentarea.

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

Cu ajutorul CSS-ului:

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

Cu acestea, veți obține un arbore frumos, indiferent de câte niveluri de adâncime doriți să mergeți.

EDIT: De asemenea, puteți utiliza padding-left dacă doriți.

Comentarii

  • +1 Pentru că ați menționat o adâncime infinită a nivelului. Ar putea fi foarte utilă, în plus ar funcționa mai bine pentru conținutul dinamic. –  > Por Sam152.
  • Eu zic listă în loc de div, dar cel puțin asta e o conversație subiectivă. +1 –  > Por annakata.
  • Întrebarea a fost să afișăm caracterele tab în paginile HTML, nu cum să le falsificăm folosind CSS… –  > Por Mathias Bynens.
  • @Matthias – preocupare ridicolă, CSS este o presupunere mai mult decât rezonabilă având în vedere HTML. Considerabil mai puțin de 1% din publicul tău nu va avea CSS. –  > Por annakata.
  • @annakata Listele sunt grozave, dar pentru o profunzime infinită, este mult mai ușor să arunci un div sub nodul părinte. Iar traversarea xpath este redusă, deoarece nu mai trebuie să adăugați ul peste tot. @Mathias Bynens Răspunsul meu este mai bun pentru a rezolva problema sa decât utilizarea caracterelor de tabulare. –  > Por geowa4.
Boldewyn

Dacă doriți cu adevărat să utilizați tabs (==caractere de tabulator), trebuie să recurgi la următoarea soluție, pe care nu o recomand:

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

sau înlocuiți <pre/> cu <div style="white-space: pre" /> pentru a obține același efect ca și în cazul elementului pre. Puteți chiar introduce un caracter de tabulare literal în locul caracterului scăpat &#x09;.

Nu o recomand pentru majoritatea utilizărilor, deoarece nu este cu adevărat semantică, adică, din vizualizarea sursei HTML, un program nu poate deduce nicio informație utilă (cum ar fi, de exemplu, „acesta este un titlu” sau altceva). Ar fi mai bine să folosiți una dintre frumoasele aplicații margin-left exemple din celelalte răspunsuri. Cu toate acestea, dacă doriți să afișați unele lucruri, cum ar fi codul sursă sau altele asemenea, soluția de mai sus ar face acest lucru.

Noroc,

edeverett

Până acum au existat o varietate de răspunsuri bune și rele, dar se pare că nimeni nu a abordat modul în care puteți alege între soluții.

Prima întrebare care trebuie pusă este „Care este relația dintre datele care sunt afișate?”. Odată ce s-a răspuns la această întrebare, structura HTML pe care o utilizați ar trebui să fie evidentă.

Vă rugăm să actualizați întrebarea explicând mai multe despre structura conținutului pe care trebuie să îl afișați și ar trebui să constatați că veți primi răspunsuri mai bune. În acest moment, totul, de la utilizarea <pre> la tabele ar putea fi cea mai bună soluție.

Comentarii

  • Cel mai bun răspuns. Pot exista 10 sau 15 soluții corecte, dar OP a făcut o treabă foarte slabă în menținerea calității în această întrebare. –  > Por cherouvim.
Eugene Yokota

Vezi Realizarea unei „file” în HTML de Neha Sinha:

Preformatat

Poți pune caractere de tabulare în HTML-ul tău direct dacă folosești ceea ce se numește text „preformatat”.În HTML, înconjoară textul pe care îl vrei „preformatat” cu o pereche de caractere „<pre>” și „</pre>” și o pereche de etichete de început și sfârșit.

Tabele

Puteți utiliza un tabel html astfel încât tot ceea ce puneți în interiorul setului de rânduri(<tr>) și coloane(<td>) se afișează în același mod. Puteți foarte bine să ascundeți marginile tabelului pentru a arăta doar textul.

Folosind <dd> Tag

The <dd> este destinată definițiilor de formatare. Dar, de asemenea, va crea o întrerupere de linie și va face o tabulație!

&nbsp;, , Spațiul fără întrerupere

O bucată de cod HTML pe care am folosit-o în exemplul de tabel este „spațiul fără întrerupere”, codificat ca în HTML. Acesta vă oferă doar un spațiu. Combinat cu o pauză de linie, <br>, , puteți crea unele efecte de tip tabulare.

Exemplu

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

acest lucru ar trebui să fie redat ca:

Test
    test
        test1

Comentarii

  • pre este complet inutil aici, mult mai bine să adăugați padding-left bazat pe unități em la elementele imbricate –  > Por annakata.
  • @annakata, există mai multe moduri de a jupui pisica în acest caz. Eu personal aș prefera calea css, dar ar putea exista situații în care este un overkil, sau pur și simplu nu este posibil. pre cred că este un hack rapid. –  > Por Eugene Yokota.
  • Acest răspuns nu merită să fie acceptat, mai ales că cel care a întrebat nici măcar nu a folosit această metodă pentru a-și rezolva problema. –  > Por Thomas Owens.
  • NU folosiți acest răspuns ca soluție acceptată. Opțiunile de utilizare a listelor de pre, de definiții și/sau a spațiilor fără întrerupere sunt complet nepotrivite pentru a crea „tab-uri”. Răspunsul lui George IV este de departe cel mai relevant. –  > Por Metro Smurf.
  • Hei, dați-i credit lui @annakata. Soluția asta are și ea mult sens. –  > Por geowa4.
Perica Zivkovic

Cred că cel mai simplu lucru de făcut este să folosiți etichete html UL/LI și apoi să manipulați (și să eliminați, dacă este necesar) simbolurile din fața listei cu CSS.

Apoi veți obține ceva de genul:

  • Test
  • Test2
    • Test 3

Mai multe informații + exemplu de lucru pe care îl puteți încerca.

Mathias Bynens

Dacă aveți nevoie să afișați tab-uri (caractere de tabulator), utilizați un PRE element (sau orice element cu caracter white-space: pre; CSS aplicat acestuia).

<!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 PRE element. Oh, and here are some tab characters, each of which are displayed between two arrows: ← → ← → ← → ← →</pre>
 </body>
</html>

De asemenea, puteți utiliza entitatea HTML &#x09; în locul caracterului de tabulare propriu-zis.

Comentarii

  • Sau orice element de bloc cu white-space: nowrap; –  > Por l0b0.
  • Nu cumva tag-ul pre strică o mulțime de formatare și forțează un font urât cu lățime uniformă a caracterelor? –  > Por Sam152.
  • Codul din blocurile de cod de pe acest site se află în tag-uri pre. Sunt ele date peste cap și urâte? –  > Por Macha.
  • Ok, prima parte nu este de ajutor, dar &#x09; este o soluție corectă, așa că nu înțeleg downvote-ul. –  > Por pihentagy.
ctwheels

Îmi dau seama că aceasta este o postare veche, totuși, cineva ar putea dori să folosească următoarea listă pentru a crea o listă indentată (prin utilizarea unui listă de descriere)


În opinia mea, aceasta este o modalitate mult mai curată decât multe dintre celelalte răspunsuri de aici și poate fi cel mai bun cel mai bun mod de a proceda:

  • Nu utilizează o mulțime de caractere de spațiu alb (ceea ce oferă puțin control în ceea ce privește formatarea stilurilor)
  • Nu utilizează <pre> care ar trebui să fie folosită doar pentru formatare (în opinia mea, aceasta ar trebui să fie o ultimă soluție sau o utilizare specială în HTML); <pre> tag-ul este, de asemenea, dependent de spațiul alb și nu depinde de CSS atunci când este utilizat în modul în care este destinat să fie utilizat

    w3schools spune că folosiți tag-ul <pre> atunci când se afișează text cu formatare neobișnuită sau un fel de cod informatic..

  • liste de descriere permit un control mai mare în ceea ce privește formatarea și ierarhia
  • Răspunsul lui @geowa4, aș spune, este o altă modalitate excelentă de a realiza acest lucru. <div>s permit controlul stilului și, în funcție de utilizare/obiectiv, răspunsul său poate fi cel mai bun. cel mai bun cale de urmat.

Tags:,