Tengo un problema con 3 select y un label dentro de mi formulario, no encunetro la forma de separarlos para darles las posiciones correctas
Código html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/Imagenes/favicon.ico" type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" media="screen" href="css/Registros.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/Regiones.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registro - Adopción</title>
</head>
<body>
<h1 class="FormTitulo">Registro de Adopción</h1>
<form action="" class="Registro">
<h2 class="FormSubtitulo">CREA UNA NUEVA CUENTA</h2>
<div class="Contenedor-Registro">
<input type="email" name="TxtCorreo" placeholder="Correo Electronico" id="TxtCorreo" class="input-100">
<input type="text" name="TxtNombres" placeholder="Nombre Completo" id="TxtNombres" class="input-100">
<input type="text" name="TxtRut" placeholder="Rut" id="TxtRut" class="input-48">
<input type="number" name="Telefono" placeholder="Teléfono de contacto" id="Telefono" class="input-dif">
<label for="">Fecha de nacimiento</label>
<input type="date" name="FechaNaci" placeholder="Año de nacimiento" id="FechaNaci" class="input-dif2">
<select name="" id=""></select>
<select id="regiones"></select>
<select id="comunas" ></select>
<input type="button" value="Registrar!" name="BtnRegistro" id="BtnRegistro" class="Boton">
</div>
</form>
</body>
</html>
Mi código CSS de mi proyecto:
*{
box-sizing: border-box;
}
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("/Imagenes/Ahorasi.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
h1{
color: white;
text-align: center;
}
select {
width: 48%;
height: 52px;
margin-bottom: 2%;
}
.Registro{
width: 95%;
max-width: 500px;
margin: auto;
background: rgba(63, 59, 59, 0.733);
border-radius: 7px;
}
.FormTitulo {
background: rgba(0, 0, 0, 0.171);
color: rgb(255, 255, 255);
padding: 20px;
text-align: center;
font-weight: 100;
font-size: 30px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.FormSubtitulo {
background: rgba(0, 0, 0, 0.24);
color: rgb(255, 255, 255);
padding: 20px;
text-align: center;
font-weight: 100;
font-size: 30px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.Contenedor-Registro{
padding: 10px 30px;
display: flex;
flex-wrap: wrap;
}
input{
margin-bottom: 15px;
padding: 15px;
font-size: 16px;
}
.input-48{
width: 48%;
}
.input-100{
width: 100%;
}
.input-dif{
margin-left: 4%;
width: 48%;
}
.input-dif2{
margin-left: 52%;
width: 48%;
}
.Boton {
border: none;
color: rgba(255, 255, 255, 0.212);
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.Boton {
background-color: rgba(0, 0, 0, 0.493);
color: rgb(255, 255, 255);
border: 2px solid rgb(119, 121, 119);
}
.Boton:hover {
background-color: rgba(54, 54, 54, 0.226);
color: rgb(161, 161, 161);
}
Imagen de cómo se ve la página
bulma
. Bootstrap es una buena librería, pero en diseños simples es como usar un camión para transportar un hoja de papel. Bulma usa solamente este archivo, que pesa muy poco. Lo incluyes al principio de tu HTML y listo. Está explicado en su documentación.