Skip to main content
se añadieron 226 caracteres en el cuerpo
Origen Enlace

En launa 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?

En la 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>
                  <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;
}
.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?

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?

Origen Enlace

¿Cómo posicionar caja hija ya que la caja padre tiene display flex en sus propiedades?

En la 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>
                  <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;
}
.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?