Tengo un formulario con una serie de labels e inputs. Con css le he dado algo de forma pero no consigo juntar un poco las etiquetas con los campos de texto. He probado reduciendo el witdh pero se desordena todo.
EDIT 1
El fichero CSS:
/* -- General -- */
.header h1 {
text-align: center;
padding: 100px;
text-shadow: 2px 2px 2px black;
color: white;
font-size: 3.5em;
}
.menu-index {
text-align: center;
}
.menu-option {
padding: 25px;
margin: 0px;
border: 1px solid steelblue;
border-radius: 10px;
}
.menu-search {
padding: 25px;
border: 1px solid steelblue;
border-radius: 10px;
}
.menu-create {
text-align: center;
border: 1px solid steelblue;
border-radius: 10px;
padding: 30px;
}
.table-create {
vertical-align: center;
padding: 5px;
}
tr:hover{
background-color: #f5f5f5;
}
/* -- Forms -- */
.form_constumer ul{
list-style-type: none;
list-style-position: outside;
margin: 0px;
padding: 0px;
}
.form_constumer li{
padding: 3px;
border-bottom: 1px solid #eee;
position: relative;
}
.form_constumer label{
float: left;
padding: 1px;
margin: 5px;
margin-top: 3px;
width: 150px;
}
.form_constumer input{
padding: 2px;
width: 400px;
border-radius: 2px;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
}
.form_constumer textarea{
padding: 2px;
width: 400px;
height: 75px;
border-radius: 2px;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
}
.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
padding-top: 5px;
margin-top: 5px;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
EDIT 2
Incluyo el body del formulario:
<body>
<div class="container">
<header class="header">
<h1>Gestión Clientes <small>NNNN</small></h1>
</header>
</div>
<div class="container menu-create">
<form action="crearcliente.php" method="POST">
<div class="form_constumer">
<ul>
<li>
<label>Nombre</label>
<input type="text" name="nombre" id="nombre" placeholder="Nombre clienta" required>
</li>
<li>
<label>Apellidos</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Apellidos clienta" required>
</li>
<li>
<label>Alias</label>
<input type="text" name="alias" id="alias" placeholder="Alias" required>
</li>
<li>
<label>Teléfono</label>
<input type="number" name="telefono" id="telefono" placeholder="123456789" required>
</li>
<li>
<label>Móvil</label>
<input type="number" name="movil" id="movil" placeholder="66666666" required>
</li>
<li>
<label>Email</label>
<input type="text" name="email" id="email" placeholder="correo@ejemplo.com" required>
</li>
<li>
<label>Dirección</label>
<input type="text" name="direccion" id="direccion" placeholder="Dirección" required>
</li>
<li>
<label>Población</label>
<input type="text" name="poblacion" id="poblacion" placeholder="Población" required>
</li>
<li>
<label>Provincia</label>
<input type="text" name="provincia" id="provincia" placeholder="Provincia" required>
</li>
<li>
<label>Código Postal</label>
<input type="number" name="codigopostal" id="codigopostal" placeholder="417.." required>
</li>
<li>
<label>Tratamiento Capilar</label>
<input type="text" name="tratamientocapilar" id="tratamientocapilar" placeholder="Sedoso" required
</li>
<li>
<label>Tratamiento Corporal</label>
<input type="text" name="tratamientocorporal" id="tratamientocorporal" placeholder="Seco" required>
</li>
<li>
<label>Observaciones</label>
<textarea type="text" cols="40" rows="6" name="observaciones" id="observaciones" placeholder="Datos de interés..." required></textarea>
</li>
<li>
<input class="submit" type="submit" name="enviar" value="Crear">
</li>
</ul>
</div>
</form>
</div>
</body>
Así es como se ve en el navegador (edge, chrome, etc.):
¿Alguna idea o sugerencia?