Usando CSS para un formulario de varias columnas

Question

¿alguna sugerencia sobre la mejor manera de hacer un formulario como ese? http://i.imgur.com/vT7tC.png

estoy usando tablas + de entrada con width: 100%, yo sé que no es probablemente la mejor manera (también, por alguna razón el ancho de entrada: 100% se hace más grande que [td] o [div] (el borde rojo en esta imagen es de una [div] [entrada ...] [/ div])

gracias

Answer 1

puede flotar la etiqueta izquierda/entradas a la izquierda y la derecha etiqueta/de entrada a la derecha.

Deberá especificar un ancho, de lo contrario terminará con un gran espacio entre sus columnas y su columna central no se alineará w con su gran entrada derecha.

Esto es como yo codificar esa forma:

HTML

<div class="content"> 
    <div class="row"> 
     <div class="lrow"> 
       <label>aaa aaa</label> 
       <input type="text" class="large"> 
     </div> 
     <div class="rrow"> 
       <label>bbb</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>ccc</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>ddd ddd</label> 
       <input type="text" class="large"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>eee</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>fff fff</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="crow"> 
       <label>ggg</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
</div> 

CSS

.content {width:542px;} 
.row {overflow:hidden;margin:5px 0;} 
.row label {float:left;text-align:right;width:60px;margin-right:5px;} 
.row input {float:left;} 
.lrow {float:left;} 
.rrow {float:right} 
.large {width:300px;} 
.small {width:100px;} 

Answer 2

no pierda su tiempo haciendo columnas con la mano.

simplemente use Blueprint CSS Framework. es realmente agradable y fácil de usar y hace el trabajo de la manera que desee.

lo más importante de todo, ya no tiene que preocuparse por la compatibilidad del navegador.