2012-03-20 14 views
112

modi possibili:Come inserire spazi/tabulazioni nel testo usando HTML/CSS?

<pre> ... </pre> 

o

style="white-space:pre" 

qualcos'altro?

+0

Intendi "tag" o "schede"? – user123444555621

+0

[Lo spazio bianco in HTML] (http://webdesign.about.com/od/styleproperties/p/blspwhitespace.htm), [Tabs in HTML] (http://webdesign.about.com/od/intermediatetutorials/qt /tiphtmltab.htm), [spaziatura out Your HTML] (http://webdesign.about.com/od/beginningtutorials/a/aabg101399a.htm), e, naturalmente, ''   –

+1

esiste un equivalente a '' ma   fare una scheda? –

risposta

30

È possibile utilizzare &nbsp; per gli spazi, per &lt;< (meno di, numero di entità &#60;) e &gt; per > (superiore, numero di entità &#62;).

Un elenco completo può essere trovato a questo indirizzo: http://www.w3schools.com/html/html_entities.asp

+0

di Ovviamente: mi sono dimenticato di ' '. – Yeseanul

80

nei casi in cui la larghezza/altezza dello spazio è oltre &nbsp; solito uso

per spacer orizzontale:

<span style="display:inline-block; width: YOURWIDTH;"></span> 

per spaziatore verticale:

<span style="display:block; height: YOURHEIGHT;"></span> 
11
<p style="text-indent: 5em;"> 
The first line of this paragraph will be indented about five characters, similar to a tabbed indent. 
</p> 

La prima riga di questo paragrafo sarà rientrato circa cinque caratteri, simili a un schede trattino

Vedi here per ulteriori informazioni

5

<span style="padding-left:68px;"></span> è anche possibile utilizzare padding-left padding-right padding-top padding-bottom

71

Per inserire tab space tra due parole/frasi di solito uso

&emsp; e &ensp;

12

mi piace usare questo:

nel CSS:

#tab { display:inline-block; 
     margin-left: 40px; } 

nel codice HTML:

<p>Some Text <span id="tab">Some Tabbed Looking Text</span></p> 
+0

Questa è una buona risposta. Ma vorrei solo dire che sarebbe meglio usare la classe CSS invece di id (significa sostituire '# tab' di '.tab' e' id = "tab" 'di' class = "tab" ') perché se lo usiamo più di una volta in uno stesso documento, potremmo avere comportamenti non definiti. Si veda, ad esempio, [questa domanda] (https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme). –

3

Se stai chiedendo per le schede di allineare elementi in alcune linee che è possibile utilizzare <table>

mettendo ciascuna riga <tr> ... </tr>

e ogni elemento interno che line <td> ... </td>

e, naturalmente, è sempre possibile controllare il riempimento di ciascuna cella per regolare lo spazio tra di loro

questo renderà loro allineati e guarderanno molto carino :)

+2

Le tabelle devono essere utilizzate per rappresentare dati tabulari, non per la formattazione. Nelle tabelle degli anni '90 frequentemente utilizzate per la formattazione a causa delle limitazioni nell'HTML e delle frustrazioni che scrivevano HTML con stili che funzionavano in modo coerente nei vari browser. Oggi è considerato un anti-modello. –

+0

Vedo il tuo punto, può essere una soluzione vecchia scuola, ma ho avuto il suo problema una volta utilizzando le tabelle lavorato perfetto per me – Argento

+1

Sì, ma è possibile utilizzare tabella di stile (con la moderna CSS) senza rovinare il significato semantico! display: tabella, ecc. – Julix

28

provare &emsp;

Come per i documenti a https://www.w3.org/MarkUp/html3/specialchars.html

Il carattere entità &ensp; e &emsp; denotano uno spazio it e uno spazio lungo rispettivamente, dove un en spazio è metà della dimensione del punto e uno spazio lungo è uguale alla dimensione del punto del font corrente. Per i font con tono fisso , il programma utente può considerare lo spazio en equivalente al carattere di spazio A e lo spazio em equivalente a due spazi caratteri.

0

questo ha funzionato per me: Nel mio CSS ho: `

tab0 { position:absolute;left:25px; } 
tab1 { position:absolute;left:50px; } 
tab2 { position:absolute;left:75px; } 
tab3 { position:absolute;left:100px; } 
tab4 { position:absolute;left:125px; } 
tab5 { position:absolute;left:150px; } 
tab6 { position:absolute;left:175px; } 
tab7 { position:absolute;left:200px; } 
tab8 { position:absolute;left:225px; } 
tab9 { position:absolute;left:250px; } 
tab10 { position:absolute;left:275px; } 

poi in HTML mi basta usare le mie schede: risposta

Dog Food <tab3> :$30 
Milk <tab3> :$3 
Pizza Kit <tab3> :$5 
Mt Dew <tab3> :$1.75 
0

di user8657661 è più vicino alle mie esigenze (. di rivestimento cose in su attraverso diverse linee) Tuttavia, non ho potuto ottenere il codice di esempio funzioni come previsto, ma aveva bisogno di cambiare come segue:

<html> 
<head> 
<style> 
.tab9 {position:absolute;left:150px; } 
</style> 
</head> 
<body> 
Dog Food: <span class="tab9"> $30</span><br/> 
Milk of Magnesia:<span class="tab9"> $30</span><br/> 
Pizza Kit:<span class="tab9"> $5</span><br/> 
Mt Dew <span class="tab9"> $1.75</span><br/> 
</body> 
</html> 

Se sono necessari numeri allineati a destra è possibile modificare left:150px a right:150px, ma sarà necessario modificare il numero in base alla larghezza dello schermo (come scritto i numeri sarebbero 150 px dal bordo destro dello schermo.)

0

spazio bianco, non si potrebbe semplicemente usare imbottitura? Questa è un'idea, mi dispiace, se non sto ottenendo questo corretto, ma è così che è possibile aggiungere qualche "area vuota" attorno al tuo elemento. Quindi puoi usare i seguenti tag CSS:

padding: 5px; 
padding-top: 5px; 
padding-bottom: 5px; 
padding-left: 5px; 
padding-right: 5px; 

Ancora dispiaciuto se questo non è quello che cercavi.