[SOLUCIONADO] Como alinear formuluario?

[fedefrankk]

Hola A todos, necesito alinear un fomulario, Email y Nombre y los imput que queden alineados iguales ya que Email es mas corta que Nombre....

dejo codigo:

</head>

Código CSS:

<style>
input#email{
    margin:20px; /* BAJA DE ARRIABA HACIA ABAJO 20PX */
    width:300px; /* LARGO DEL INPUT*/
    height:30PX; /* ALTURA DEL INPUT*/
    padding-left:10px; /*SEPARA EL TEXTO 10PX DENTRO DEL INPUT */
    outline-color:#6BBFF1; /* COLOR DEL BORDE DEL INPUT COMO SE VE AL CARGAR LA WEB */
    border:1px solid #C9CBCA;/* DEFINE EL COLOR DE LA LINEAS DEL INPUT*/ 
    -webkit- border-radius: 4px; /* DEFINE LOS BORDES REDONDEADOS */
    border-radius: 4px;
    -webkit- box-shadow: 0px 0px 4px #B6B6B6; /* DEFINE SOMBRA */
    box-shadow:0px 0px 4px #B6B6B6;
    -webkit-transition: width .5s;
    transition: width .5s;
    }
 
input#email:focus{
    width:350px; /* ALARGA EL INPUT A 350PX CON EL FOCUS */ 
    border:1px solid #C9CBCA;/* DEFINE EL COLOR DE LA LINEAS DEL INPUT*/ 
    }
/***************************************/
input#text{
    margin:20px; /* BAJA DE ARRIABA HACIA ABAJO 20PX */
    width:300px; /* LARGO DEL INPUT*/
    height:30PX; /* ALTURA DEL INPUT*/
    padding-left:10px; /*SEPARA EL TEXTO 10PX DENTRO DEL INPUT */
    outline-color:#6BBFF1; /* COLOR DEL BORDE DEL INPUT COMO SE VE AL CARGAR LA WEB */
    border:1px solid #C9CBCA;/* DEFINE EL COLOR DE LA LINEAS DEL INPUT*/ 
    -webkit- border-radius: 4px; /* DEFINE LOS BORDES REDONDEADOS */
    border-radius: 4px;
    -webkit- box-shadow: 0px 0px 4px #B6B6B6; /* DEFINE SOMBRA */
    box-shadow:0px 0px 4px #B6B6B6;
    -webkit-transition: width .5s;
    transition: width .5s;
    }
 
input#text:focus{
    width:350px; /* ALARGA EL INPUT A 350PX CON EL FOCUS */ 
    border:1px solid #C9CBCA;/* DEFINE EL COLOR DE LA LINEAS DEL INPUT*/ 
    }
 
input#boton{ padding:5px 50px; cursor:pointer;
color:#FFFFFF;
font-size:1em;
background-color:#5DADE2;
    -webkit-transition:background-color .25s;
    transition:background-color .25s;
border: 0px; 
-webkit- border-radius: 5px; /* DEFINE LOS BORDES REDONDEADOS */
border-radius: 5px;
-webkit- box-shadow: 0px 4px 0px #4AA4DF; /* DEFINE SOMBRA */
box-shadow:0px 4px 0px #4AA4DF;
 
}
input#boton:hover{
    background-color:#7ABBE7;
    
}
 
 
 
</style>
 

Código HTML:

<form action="#" method="post" />
<label for="email">Email:</label>
<input type="email"  id="email" name="email" placeholder="escribe tu email">
<br>
<label for="text">Contraseña:</label>
<input type="text"  id="text" name="text" placeholder="tu contraseña">
<br>
<input type="submit" value="enviar" id="boton">
</form>
</div>
</body>
</html>
 

Desde ya muchas gracias, espero que se entienda
saludos a todos.!
Fed

[AngelKrak]

Eso lo puedes hacer con un Display al Label ;)

Código CSS:

label {
  display: inline-block;
  width: 70px;
}
 

Demo:
http://codepen.io/AngelKrak/pen/XmKZvb

[fedefrankk]

Hola.! Espectacular.!!! Que sencillo que lo hacen y como me cuesta.!!!!

Saludos y gracias por tu tiempo.
fede