0

llevo un rato tratando de encontrarle la solución a mi problema pero no entiendo el porque sucede.

Tengo 3 selects en un formulario y se juntan, no tienen un margen pero tampoco logro darcelos en el css

Cómo se ve en la imagen, estos 3 estan juntos y quiero seguir el diseño de mi proyecto

select {
 width: 48%;
 height: 52px;
}

Con ese código logre darles el tamaño que quería pero no logro la separación.

input{
 margin-bottom: 15px;
 padding: 15px;
 font-size: 16px;
}

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%;
}

Con el código anterior hice el diseño de todos los demás campos.

Soy bastante novato en esto de las páginas web..

1
  • 1
    Realmente eso podría tener N soluciones.: --- 1. Usar CSS Grid Layout. 2. Usar DIvs para poner allí cada Select. 3. Usar Positión: Absolute. 4. Usar Flexbox. 5. Usar Margin y Padding 6. y tal vez muchas mas...
    – Tato OC
    Commented el 29 ago. 2018 a las 0:28

3 respuestas 3

3

Es muy sencillo, simplemente añádele a la clase select un margin-left: 4%; como hiciste con los inputs. Así:

select{
  padding: 1em;
  margin-left: 4%; /*esto es lo que necesitas añadirle al select*/
}

/*=============================================
===============================================
===============================================
LO SIGUIENTE LO PUEDES IGNORAR ES PARA QUE SE 
PAREZCA UN POCO A LA IMAGEN DE EJEMPLO
===============================================
===============================================
=============================================*/



*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-image: url('http://picsum.photos/1600/1000?image=1044');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

form{
  display: inline-flex;
  background-color: rgba(0,0,0,.5);
  width: 80%;
  max-width: 35em;
  justify-content: center;
  padding: 1em;
  border-radius: 10px;
}
<form action="">
  <select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
  </select>
  <select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
  </select>
  <select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
  </select>
</form>

1
  • O directamente le pone el class .input-dif a los selects (ya que comparten las mismas características) Commented el 29 ago. 2018 a las 0:23
1

Pon Un <br> después de cada <input /> en El HTML eso separará los input.

6
0

podrías añadir un simple separador CSS, aunque este método es una solución para "salir del paso" te puede servir.

  1. Crear una clase CSS con estos datos:

.separador { padding-left: 3px; }

Puedes usar margin-left también, revisa el manual de CSS por si encuentras otra opción que te pueda servir. :)

Manual para CSS.

  1. Entre los select, puedes crear un "div" con class="separador"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.