Come posso allineare le mie scatole se il testo in è più lungo degli altri.Allineamento riquadro di input?
Ho questo intero modulo all'interno di una lista non ordinata.
ho copiato e visualizzato il codice tramite jsFiddle, è possibile trovare quello che sto parlando di qui ...
vostri <label> tag sono stati avvolgendo il <input> tag che è stato la causa del problema di cercare per trattare separatamente con i CSS:
vorrei raccomandare che si cambia il modulo HTML come questo
<li><label for="firstname">PATIENT FIRST NAME: </label><input type="text" id="firstname"/></li>
<li><label for="middle">PATIENT MIDDLE INITIAL:(OPTIONAL) </label><input type="text" id="middle" /></li>
<li><label for="last">PATIENT LAST NAME: </label><input type="text" id="last" /></li>
<li><label for="date">DATE OF BIRTH: </label><input type="text" id="date" /></li>
<li><label for="gender">GENDER: </label><input type="text" id="gender" /></li>
<li><label for="id">SUBSCRIBER ID: </label><input type="text" id="id"/></li>
for sull'etichetta per collegarlo ad un ingresso.aggiungere una regola CSS per #form-container label per dare loro una larghezza specifica:
width: 210px;
la demo funziona bene in IE8, ma (per qualche motivo) NON in Chrome (v.24). – kmote
Esistono diversi approcci per creare uno stile. In questo caso puoi far fluttuare gli input e questo ti darà il risultato che desideri senza cambiare l'html.
See demo: http://jsfiddle.net/EFByC/8/
Perché hai segnato il modulo in <ul>, questo non è nessesary.
Per un layout più gradevole e più leggibile, suggerisco di avere le etichette sopra i campi di input. Qualcosa di simile a questo:
"I campi di input non devono essere nidificati nelle etichette" puoi farlo? w3c lo consiglia; è buono per l'accessibilità – albert
hai ragione, cancellato quella frase nella mia risposta sopra – Muleskinner
@albert - Sono d'accordo. Ho collegato una domanda correlata nella mia risposta e gli input standard okays prima, dopo e all'interno delle etichette. Quello che è "il migliore" si riduce alle preferenze personali - principalmente un argomento tra puristi dell'HTML ("un'etichetta è un elemento separato - non un elemento di contenimento") e coloro che preferiscono la semplicità e/o meno la digitazione ("tutto ciò che per =" xxx "e id =" xxx "gli affari diventano un po 'tediosi"). –
aggiungere un fieldset, mettere una larghezza su di esso. visualizza i tuoi input e le etichette: block; galleggiare gli ingressi a destra
hai un paio di opzioni, in realtà:
e si noti che, mentre molte persone stanno dicendo che è male avere un ingresso all'interno di un'etichetta, che non è necessariamente vero (è sicuramente nella norma - vedi this question per più su quello). E il wrapping dell'input nell'etichetta consente di ottenere il comportamento "fai clic sul nome e focalizza il campo" senza specificare un gruppo di attributi "for =" whatever "'brutti.
Spero che questo aiuti!
Il wrapping dell'etichetta attorno all'input è un modo per associare l'etichetta al campo. Facendo clic sull'etichetta, si concentra sul campo. Il modo in cui l'hai fatto non ha alcuna associazione, quindi nessuna attenzione e l'accessibilità è scarsa. Lo faccio nel modo in cui Peter mostra nella sua risposta, con il 'for =" .. "' qualificatore per legare insieme l'etichetta e il campo. –
@StephenP Buon punto. Mi sono concentrato solo sullo stile che ho dimenticato del qualificatore 'for'. Non mi sono nemmeno accorto che tutti gli attributi di 'name' erano identici! Ad ogni modo, è stato aggiornato. –