¿Cómo puedo hacer que mis cajas se alineen entre sí si el texto en el es más largo que los demás?Alineación de cuadro de entrada?
Tengo este formulario completo dentro de una lista desordenada.
He copiado y se muestra el código a través de jsFiddle, usted puede encontrar lo que estoy hablando aquí ...
Sus <label> etiquetas envolvían los <input> etiquetas que estaba causando el problema de tratar tratarlos por separado con CSS:
yo recomendaría que cambie su formulario HTML como éste
<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 en la etiqueta para conectarlo a una entrada.añadir una regla CSS para #form-container label para darles un ancho específico:
width: 210px;
la demostración funciona bien en IE8, pero (por alguna razón) NO en Chrome (v.24). – kmote
Hay varios enfoques para formar el estilo. En este caso puede flotar las entradas y eso le dará el resultado que desea sin cambiar el html.
Ver demostración de: http://jsfiddle.net/EFByC/8/
¿Por qué ha marcado la forma en <ul>, esto no es nessesary.
Para un diseño más agradable y legible, sugiero que tenga sus etiquetas en la parte superior de los campos de entrada. Algo como esto:
"Los campos de entrada no deben anidarse en las etiquetas" ¿puede respaldar eso? w3c lo recomienda; es bueno para la accesibilidad – albert
tiene razón, eliminó esa oración en mi respuesta anterior – Muleskinner
@albert - Estoy de acuerdo. Relacioné una pregunta relacionada en mi respuesta, y el estándar acepta entradas antes, después y dentro de las etiquetas. Cuál es el "mejor" se reduce a las preferencias personales, principalmente un argumento entre puristas de HTML ("una etiqueta es un elemento separado, no un elemento que contiene") y aquellos que prefieren simplicidad y/o menos tipeo ("todo eso para =" xxx "y id =" xxx "el negocio se vuelve tedioso"). –
agregar un conjunto de campos, puso una anchura en él. hacer que se muestren sus entradas y etiquetas: bloque; flotar sus entradas derecha
usted tiene un par de opciones, en realidad:
Y tenga en cuenta que mientras que mucha gente está diciendo que es malo tener una entrada dentro de una etiqueta, eso no es necesariamente cierto (que es sin duda en la norma - ver this question para más sobre esto). Y envolver la entrada en la etiqueta le permite obtener el comportamiento de "hacer clic en el nombre y enfocar el campo" sin especificar un conjunto de atributos feos "para =" lo que sea ".
Espero que esto ayude!
Envolver la etiqueta alrededor de la entrada es una forma de asociar la etiqueta con el campo. Al hacer clic en la etiqueta, se enfoca al campo. La forma en que lo ha hecho no es una asociación, por lo que no hay foco, y la accesibilidad es pobre. Lo hago de la manera que Peter muestra en su respuesta, con el calificador 'for =" .. '' para unir la etiqueta y el campo. –
@StephenP Buen punto. Solo me enfoqué en el estilo que olvidé del calificador 'for'. ¡Ni siquiera noté que todos los atributos de 'nombre' eran idénticos! De todos modos, ha sido actualizado. –