0

En una practica relacionada con html y css tengo un div donde este tiene display: flex y adentro de este div hay otro que tiene iconos pero debo ubicarlo en la parte derecha del div padre. A continuación lo que tengo de código:

<div class="cabeceraOpc">
                  <input type="checkbox" id="btn">
                  <label for="btn-menu" id="lbl_btn" class="icon-menu" ></label>
                  <nav class="menu">...</nav>
                  <div class="menuIconos">
                     <i class="icon-search efectoHover"></i>
                     <i class="icon-user efectoHover"></i>
                  </div>
</div>

y en el css tengo:

.cabeceraOpc{
      width: 100%;
      margin: auto;
      background: #000;
      display: flex;
      z-index: 80;
}
#lbl_btn{
      width: 30%;
      margin-left: 10px;
      color: #31B9DD;
      font-size: 1.875em;
       cursor: pointer;
}
.menu{
      position: absolute;
      top:103px;
      left: 0;
      width: 70%;
      transform: translateX(-100%);
      transition: all 0.7s;
      z-index: 80;
  }
.menuIconos{
      line-height: inherit;
      font-size: 1.05em;
      background: #000;
      display: inline-flex;
      margin-right: 5px;
      align-items: center;
      justify-content: flex-end;
      z-index: 80;
}

La clase menu-iconos tiene el display: inline-flex ya que lo utilizo para poder centrar los iconos verticalmente.

Que puedo implementar para que se pueda visualizar este div a la drecha de cabeceraOpc?

1 respuesta 1

0

introducir la descripción de la imagen aquí

Este es el resultado que se desea ejecutando o viendolo en el navegador. La solución que funcionó en este caso fue agregando justify-content: space-between en la clase cabeceraOpc en la hoja css.

en este enlace pueden ver unos trucos con flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1
  • Para que sea una mejor respuesta, agrega una mejor explicación, así otras personas sabrán como solucionarlo en base a un fundamento
    – Christian
    Commented el 28 may. 2021 a las 18:41

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.