1

Estoy haciendo un sitio web para dominar mejor HTML y CSS pero tengo un problema.

introducir la descripción de la imagen aquí

El problema es que el Input (El recuadro de Escribe tu direccion), solo lo puedo agrandar lateralmente usando px pero este es un problema si cambia la resolucion, si intento hacerlo con 90%, no se ocupa todo.

.box{

  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;

}


.box .maps .direccion{

  width: 90%;
  height: 20px;

}
<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

0

2 respuestas 2

1

Ten en cuenta lo siguiente:

Un elemento inline NO será afectado por propiedades como width o height

Y elementos como <input>, <button>, <select>, <textarea>; tienen un display:inline por defecto

Para solucionarlo, nos han traído una opción mejor: inline-block

La cual hace que se combine con inline y block a la vez, como es block también, el elemento si se verá afectado por width y height

.box{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  background: #9b9b9b;
  height: 100px;
  width: 40%;
  margin: auto;
  border-radius: 10px;
}

.maps {
  width: 100%;
}

.direccion {
  display:inline-block;
  width:100%;
}
<div class="box">
    <div class="maps">
        <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
    </div>
</div>

2
  • Entonces esto se puede aplicar para cualquier tipo de input?
    – rapac56
    Commented el 16 mar. 2021 a las 23:07
  • @rapac56 Si....
    – Rodrigo
    Commented el 16 mar. 2021 a las 23:18
0

Para mantener el código que ya tienes, solo te diría que realices los siguientes cambios:

  • No necesitas un selector de combinador de descendientes, basta con aplicarle el ancho al elemento deseado y ya1

    .direccion{
        width: 90%;
    }
    
  • Si lo que buscas es con flexbox centrar vertical y horizontalmente el input entonces lo estas haciendo mal, debería ser a la clase maps a la que se le deben asignar esas propiedades y valores así:

    .maps{
      display: flex;
      justify-content: center;
      align-items: center;
      border: 5px solid black;
      background: #9b9b9b;
      height: 100px;
      width: 40%;
      margin: auto;
      border-radius: 10px;
    }
    

Con este resultado:

    <style>
    .maps{
      display: flex;
      justify-content: center;
      align-items: center;
      border: 5px solid black;
      background: #9b9b9b;
      height: 100px;
      width: 40%;
      margin: auto;
      border-radius: 10px;
    }
    
    
    .direccion{
      width: 90%;
    }
    </style>
    <div class="box">
        <div class="maps">
            <input type="text" name="direction" placeholder="Escribe tu direccion" class="direccion">
        </div>
    </div>

Notas importantes

  • 1 Es muy importante que tengas en cuenta lo que el otro usuario te menciona respecto a la naturaleza inline o block de los elementos como en este caso el input, pero aqui en particular y aclarando que esta respuesta no se basa en dicho enlace, te recomiendo leas el excelente aporte de @BoltClock

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.