Come inserire interruzioni di riga nei documenti HTML usando CSS

Sto scrivendo un servizio web e voglio restituire i dati come XHTML. Dato che si tratta di dati, non di markup, voglio mantenerlo molto pulito – nessun

s o extra. Tuttavia, per comodità degli sviluppatori, mi piacerebbe anche rendere i dati restituiti ragionevolmente leggibili in un browser. Per fare ciò, sto pensando che un buon modo per farlo sarebbe usare i CSS.

La cosa che voglio fare in particolare è inserire interruzioni di riga in determinati punti. Sono a conoscenza del display: block, ma in realtà non funziona nella situazione che sto cercando di gestire ora – un modulo con i campi . Qualcosa come questo:

 
Thingy 1: Thingy 2: Thingy 3: Thingy 4:

Mi piacerebbe che fosse visualizzato in modo che ogni etichetta fosse visualizzata sulla stessa riga del campo di input corrispondente. Ho provato questo:

 input.a:after { content: "\a" } 

Ma quello non sembrava fare nulla.

Sarebbe meglio racchiudere tutti i tuoi elementi negli elementi dell’etichetta, quindi applicare i CSS alle etichette. Il: before e: after pseudo classs non sono completamente supportati in modo coerente.

I tag delle etichette presentano molti vantaggi, tra cui una maggiore accessibilità (su più livelli) e altro ancora.

  

quindi usa i CSS sugli elementi dell’etichetta …

 label {display:block;clear:both;} 

I controlli del modulo sono trattati in modo particolare dai browser, quindi molte cose non funzionano necessariamente come dovrebbero. Una di queste cose è il contenuto generato – non funziona per i controlli del modulo. Invece, avvolgi le etichette in e usa label:before { content: '\a' ; white-space: pre; } label:before { content: '\a' ; white-space: pre; } label:before { content: '\a' ; white-space: pre; } . Puoi farlo anche fluttuando tutto e aggiungendo clear: left agli elementi .

Sembra che tu abbia un mucchio di oggetti che vorresti mostrare in una lista, giusto? Hmm … se solo quelle specifiche HTML avessero pensato di includere il markup per gestire un elenco di elementi …

Ti consiglierei di configurarlo in questo modo:

 

Quindi il CSS diventa molto più facile.

il seguente ti darebbe le nuove linee. Avrebbe anche messo degli spazi in più davanti … dovresti rovinare il rientro della sorgente rimuovendo il tabbing.

 form { white-space: pre } 
 

e il seguente css

 form label { display: block; } 
  

Un’opzione consiste nel specificare un modello XSLT all’interno del tuo XML che (alcuni) i browser elaboreranno consentendo di includere la presentazione con mark-up, CSS, colors ecc. Che non dovrebbe influire sui consumatori del servizio web.

Una volta in XHTML potresti semplicemente aggiungere un po ‘di padding attorno agli elementi con i CSS, ad es

modulo input.a {margin-bottom: 1em}

Il segreto è quello di circondare il tuo intero object, etichetta e widget, in un arco la cui class fa il blocco e chiaro:

  
Thingy 1: Thingy 2: Thingy 3: Thingy 4:

Sono d’accordo con John Millikin. Puoi aggiungere tag o qualcosa attorno a ciascuna riga con una class CSS definita, quindi renderli visualizzati: blocca se necessario. L’unico altro modo in cui posso pensare di farlo è quello di rendere il un blocco inline e farli emettere “molto grande” padding-right, che renderebbe il contenuto in linea a capo.

Anche così, la soluzione migliore è raggruppare i dati logicamente in tag (o simili) per indicare che tali dati appartengono insieme (e quindi lasciare che il CSS faccia il posizionamento).

L’elemento clear CSS è probabilmente quello che stai cercando per ottenere interruzioni di riga. Qualcosa lungo:

#login form input {clear: both; }

si assicurerà che nessun altro elemento fluttuante rimanga su entrambi i lati dei campi di input.

Riferimento

Le opzioni javascript sono finite per complicare le cose. Fai come suggerito Jon Galloway o daniels0xff.

Usa javascript. Se stai usando la libreria jQuery, prova qualcosa del genere:

 $("input.a").after("
")

O qualunque cosa ti serva.