CSS para etiquetas de formato dinámico ancho

Question

Actualmente estoy trabajando en la refabricación de uno de nuestros Controladores de formulario para que podamos usarlo en un sitio público. Actualmente está generando un diseño de tabla para los formularios, pero estoy tratando de hacerlo usando formularios CSS.

que estoy tratando de reproducir algo que se vería así Edición http://www.stylephreak.com/uploads/source/cssforms/cssform.php

que estoy teniendo es que cada CSS ejemplos de formularios que encuentro parece suponer un ancho fijo para la etiqueta de columna de la izquierda. No tengo control sobre lo que aparece en la etiqueta en mi caso, proviene de un banco de traducción editable por el usuario. Con una mesa es super fácil, simplemente usaría espacios en blanco: nowrap; y la etiqueta más larga decidiría sobre el ancho del td y todos están contentos.

¿Es posible hacer algo similar con CSS? Intenté usar min-width y forzarlo para que no se enrollara. Esto funcionó pero solo empuja el control actual a la derecha y arruinó la alineación, sin mencionar que el mínimo ancho no es compatible con IE 6.

¿Realmente es tan malo usar una tabla para diseños de formularios? Son datos tabulares y tienen sentido cuando se linealizan después de todo, ¿no?

Answer 1

Puede configurar el <label> css en display: table-cell y el que contiene <div> en display: table-row. Esto imitará el comportamiento de usar una tabla sin usar realmente un <table>.

<div style="display: table-row"> 
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-firstname">First Name:</label> 
    <input type="text" name="fm-firstname" id="fm-firstname" /> 
</div> 
<div style="display: table-row"> 
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-lastname">Last:</label> 
    <input type="text" name="fm-lastname" id="fm-lastname" /> 
</div> 

Esto se verá genial en cualquier navegador reciente (Firefox, Chrome, IE8 +). En IE7, los cuadros de texto no se alinearán correctamente.

Answer 2

Bueno, aquí hay una solución poco convencional, pero creo que la simplicidad debería funcionar para todos los navegadores.

The sample fiddle.

La accesibilidad no parece ser un problema, ya que tanto el control del teclado como el del mouse funcionan como se deseen. La principal desventaja, por supuesto, es que esta página no funciona bien si CSS está desactivado. ¿Hay alguna estadística sobre eso? Y también no sé cómo reaccionarán los lectores de pantalla ante este desenfreno.

Answer 3

Según mi conocimiento, form siempre ocupan el 100% del ancho disponible. Podrías usar eso.

Si se le permite ocupar todo el ancho del contenedor provisto de esta forma, entonces esto parece una respuesta válida:

The sample fiddle.

La desventaja de menor importancia en este caso es elegir la relación entre el ancho de las etiquetas y las entradas.