mostrando entradas de formulario html horizontalmente

Question

Estoy tratando de recrear el formulario de inicio de sesión que se muestra en la página principal de tinypic.

en html, tengo los 3 elemnts como este:

E-Mail: 
<input type="text" name="id" maxlength="30" value="" /> 
Password: 
<input type="text" name="pw" maxlength="30" value="" /> 

<input type="submit" name="submit" value="Login" /> 

he tratado de ponerlos en divs separadas, usando float: left con una clase única en css pero el el código es realmente desordenado irrazonablemente largo. así que esencialmente, quería saber si había una manera simple de lograr este diseño con html y css.

gracias por el tiempo!

Answer 1

Este CSS debería funcionar, aunque no lo he probado:

input { display: inline; } 

Answer 2

Sólo tiene que añadir display:inline a sus elementos de entrada, como se muestra here

Answer 3

Aquí está mi solución: (http://jsfiddle.net/HcppN/)

HTML:

<label>E-Mail:</label> 
<input type="text" name="id" maxlength="30" value="" /> 
<label>Password:</label> 
<input type="text" name="pw" maxlength="30" value="" /> 

<input type="submit" name="submit" value="Login" /> 

CSS:

input, label { 
    float:left; 
    margin:5px; 
} 

también recomiendo encapsular las etiquetas en <label> etiquetas. Incluso puede usar el atributo for="inputId", de modo que al hacer clic en la etiqueta se enfoca la entrada.