Formulario HTML con campos de entrada uno al lado del otro

Question

Tengo un formulario html que es básicamente vertical pero realmente no tengo idea de cómo hacer dos campos de texto en la misma línea. Por ejemplo, el siguiente formulario a continuación, quiero el nombre y apellido en la misma línea en lugar de uno debajo del otro.

<form action="/users" method="post"><div style="margin:0;padding:0"> 


      <div> 
       <label for="username">First Name</label> 
       <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 

      </div> 

      <div> 
       <label for="name">Last Name</label> 
       <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
      </div> 
      <div> 
       <label for="email">Email</label> 
       <input id="user_email" name="user[email]" size="30" type="text" /> 
      </div> 
      <div> 
       <label for="pass1">Password</label> 
       <input id="user_password" name="user[password]" size="30" type="password" /> 
      </div> 
      <div> 
       <label for="pass2">Confirm Password</label> 

       <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /> 

      </div> 

Answer 1

El estilo de visualización por defecto para un div es "bloqueo". Esto significa que cada div nuevo estará debajo del anterior.

Puede:

obligar un estilo de flujo mediante el uso de flotador como sugiere @Sarfraz.

o

Cambiar tu html para usar algo distinto divs para los elementos que desee en la misma línea. Sugiero que acaba de dejar de lado los divs para el campo "apellidos"

<form action="/users" method="post"><div style="margin:0;padding:0"> 
    <div> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 

    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
    </div> 
    ... rest is same 

Answer 2

Ponga style="float:left" en cada uno de sus divs:

<div style="float:left;">........... 

Ejemplo:

<div style="float:left;"> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
</div> 

<div style="float:left;"> 
    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

Para poner un elemento en la nueva línea, poner esto div debajo de él:

<div style="clear:both;">&nbsp;</div> 

Por supuesto, también se pueden crear clases en el archivo CSS:

.left{ 
    float:left; 
} 

.clear{ 
    clear:both; 
} 

Y entonces su html debe tener este aspecto:

<div class="left"> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
</div> 

<div class="left"> 
    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

Para poner un elemento en la nueva línea, poner este div debajo que:

<div class="clear">&nbsp;</div> 

Más información:

• CSS Float Clear Tutorial

Answer 3

me gustaría ir con una solución de Larry K, pero también se puede configurar la pantalla a inline-block si desea que los beneficios de ambos bloque y elementos en línea.

Puede hacer esto en la etiqueta div insertando:

style="display:inline-block;" 

O en una hoja de estilo CSS con este método:

div { display:inline-block; } 

creo que sirve, pero como se ha mencionado anteriormente, yo personalmente ir por la solución de Larry K ;-)

Answer 4

Por el bien del ahorro de ancho de banda, no debemos incluir <div> para cada uno de <label> y <input> par

Esta solución puede brindarle un mejor servicio y puede aumentar la legibilidad

<div class="form"> 
      <label for="product_name">Name</label> 
      <input id="product_name" name="product[name]" size="30" type="text" value="4"> 
      <label for="product_stock">Stock</label> 
      <input id="product_stock" name="product[stock]" size="30" type="text" value="-1"> 
      <label for="price_amount">Amount</label> 
      <input id="price_amount" name="price[amount]" size="30" type="text" value="6.0"> 
</div> 

El css para la forma anterior sería

.form > label 
{ 
    float: left; 
    clear: right; 
} 

.form > input 
{ 
    float: right; 
} 

creo que la salida sería de la siguiente manera:

Answer 5

Debe poner la entrada para t el apellido en el mismo div donde tienes el primer nombre.

<div> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

Luego, en el CSS y darle a su #user_first_name #user_last_name altura y flotar a los dos a la izquierda. Por ejemplo:

#user_first_name{ 
    max-width:100px; /*max-width for responsiveness*/ 
    float:left; 
} 

#user_lastname_name{ 
    max-width:100px; 
    float:left; 
}