it-swarm.it

Come inserire interruzioni di riga nei documenti HTML usando CSS

Sto scrivendo un servizio web e voglio restituire i dati come XHTML. Poiché si tratta di dati, non di markup, voglio mantenerlo molto pulito - nessun <div>s o <span>s aggiuntivo. 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 <input>. Qualcosa come questo: 

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

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. 

38
Craig Andera

Sarebbe meglio racchiudere tutti i tuoi elementi negli elementi dell'etichetta, quindi applicare i CSS alle etichette. Il: before e: after pseudo classes 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.

<label>
    Thingy one: <input type="text" name="one">;
</label>

quindi usa CSS sugli elementi dell'etichetta ...

label {display:block;clear:both;}
54
BrewinBombers

I controlli del modulo sono trattati in modo speciale 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 <label> e usa label:before { content: '\a' ; white-space: pre; }. Puoi farlo anche fluttuando tutto e aggiungendo clear: left agli elementi <label>.

41
Jim

Sembra che tu abbia un mucchio di elementi di forma 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:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Quindi il CSS diventa molto più facile.

12
Jon Galloway

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

form { white-space: pre }
4
Jimmy
<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

e il seguente css

form label { display: block; }
2
daniels
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>
2
Galen

Un'opzione consiste nel specificare un modello XSLT all'interno del tuo XML che (alcuni) i browser elaboreranno consentendo di includere la presentazione con markup, CSS, colori 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 CSS, ad es.

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

2
DamienG

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

<style type="text/css">
.lb {
display:block;clear:both;
}
</style>

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
1
D-n Russler

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

0
lordscarlet

Sono d'accordo con John Millikin. Puoi aggiungere tag <span> o qualcosa attorno a ogni riga con una classe CSS definita, quindi renderli visualizzati: blocca se necessario. L'unico altro modo in cui posso pensare di farlo è quello di rendere <input> un blocco inline e farli emettere "molto grande" padding-right, che renderebbe il contenuto inline a capo.

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

0
Thunder3

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

#login form input { chiaro: entrambi; }

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

Riferimento

0
Leo Utskot