0

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. He estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco si falta alguna etiqueta o estoy ignorando algo...

     body {
      background-color: beige;
    }
    .nav__responsive-ul {
      display: none;
    }
    nav {
      background-color: #94a7ae;
    }
    .nav__li {
      display: inline-block;
      padding: 0.75rem;
      color: aliceblue;
    }
    .nav__li :hover > a {
      color: #bbb;
    }
    .nav__li :hover {
      color: #bbb;
    }
    .nav__li a {
      color: white;
      text-decoration: none;
    }
    .nav__li i {
      width: 1.875rem;
      box-sizing: border-box;
      text-align: right;
      margin-left: 0.313rem;
    }
    * {
      font-weight: 100;
      font-size: 20px;
    }
    div {
      width: 100%;
      display: inline-block;
    }
    
    h1 {
      font-size: 24px;
    }
    h2 {
      text-align: left;
      font-size: 23px;
      padding: 1.5rem;
    }
    .nav__responsive-button{
        float: right;
    }
    @media only screen and (max-width: 50rem) {
      .nav-ul {
        display: none;
      }
    
      .nav__responsive-ul {
        display: block;
      }
    }
      <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>JSDevs</title>
            <script
              src="https://kit.fontawesome.com/8af7719ad1.js"
              crossorigin="anonymous"
            ></script>
            <link rel="stylesheet" href="css/style.css"
          </head>
          <body>
            <header>
              <nav class="nav">
                <ul class="nav-ul">
                  <li class="nav__li">
                    <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-address-card"></i
                    ><a href="#">Sobre nosotros</a>
                  </li>
                </ul>
                <ul class="nav__responsive-ul">
                  <div class="nav__responsive-button fas fa-bars"></div>
                  <div class="nav__li-container">
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-address-card"></i
                      ><a href="#">Sobre nosotros</a>
                    </li>
                  </div>
                </ul>
              </nav>
            </header>
          </body>

2 respuestas 2

1

Te dejo un ejemplo utilizando display flex y alineando con justify-content:flex-end;, el cual lo hace a tu derecha como lo quieres, recuerda que a los contenedores se les tiene que asignar un width, para que los elementos se distribuyan sobre el espacio existente, si no lo haces, hara la alineación pero no te percataras de ella ya que el espacio no es suficiente. Comente en el CSS para que lo comprendas mejor.

body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN FILAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  flex-direction: row;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>

Pruebalo en tu navegador, aquí no se ve bien, dime si te sirvió.

introducir la descripción de la imagen aquí

2
  • Muchas gracias me ha funcionado de maravilla!! Commented el 11 ago. 2022 a las 13:57
  • No olvides aceptar la respuesta para indicar que ha sido resuelta, de paso ganas tus primeros puntos. Commented el 11 ago. 2022 a las 15:16
0

Hay varias formas de alinear y acomodar un elemento. Esto se lleva en cuenta según el diseño y comprendiendo los demás objetos alrededor o sus hermanos o abacentes etc.

Primer ejemplo Se puede usar flex así:

     body {
      background-color: beige;
    }

    header {
     display: flex;
     align-items: center;
     position: relative;
     width: 100%;
     height: 100px;
     background-color: #123
    }
    
    .nav {
     margin: auto;
     margin-right: 0
    }
    
    .nav__responsive-ul {
      display: none;
    }
    nav {
      background-color: #94a7ae;
    }
    .nav__li {
      display: inline-block;
      padding: 0.75rem;
      color: aliceblue;
    }
    .nav__li :hover > a {
      color: #bbb;
    }
    .nav__li :hover {
      color: #bbb;
    }
    .nav__li a {
      color: white;
      text-decoration: none;
    }
    .nav__li i {
      width: 1.875rem;
      box-sizing: border-box;
      text-align: right;
      margin-left: 0.313rem;
    }
    * {
      font-weight: 100;
      font-size: 20px;
    }
    div {
      width: 100%;
      display: inline-block;
    }
    
    h1 {
      font-size: 24px;
    }
    h2 {
      text-align: left;
      font-size: 23px;
      padding: 1.5rem;
    }
    .nav__responsive-button{
        float: right;
    }
    @media only screen and (max-width: 50rem) {
      .nav-ul {
        display: none;
      }
    
      .nav__responsive-ul {
        display: block;
      }
    }
      <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>JSDevs</title>
            <script
              src="https://kit.fontawesome.com/8af7719ad1.js"
              crossorigin="anonymous"
            ></script>
            <link rel="stylesheet" href="css/style.css"
          </head>
          <body>
            <header>
              <h1>Header</h1>
              <nav class="nav">
                <ul class="nav-ul">
                  <li class="nav__li">
                    <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-address-card"></i
                    ><a href="#">Sobre nosotros</a>
                  </li>
                </ul>
                <ul class="nav__responsive-ul">
                  <div class="nav__responsive-button fas fa-bars"></div>
                  <div class="nav__li-container">
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-address-card"></i
                      ><a href="#">Sobre nosotros</a>
                    </li>
                  </div>
                </ul>
              </nav>
            </header>
          </body>

Segundo ejemplo y la mejor forma es posicionando la etiqueta nav de forma absoluta. Para esto, el contenedor padre (en este caso el header) debe ser de posición relativa. Luego el nav de posición absoluta y alineado arriba a la derecha con top y right; y ya está

    :root {
     --altoHeader: 100px
    }
    
     body {
      background-color: beige;
    }

    header {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     width: 100%;
     height: var(--altoHeader);
     padding: 0 10px;
     background-color: #123
    }
    
    .nav {
     position: absolute;
     z-index: 1000;
     top: calc(var(--altoHeader) - 50%);
     right: 0
    }
    
    .nav__responsive-ul {
      display: none;
    }
    nav {
      background-color: #94a7ae;
    }
    .nav__li {
      display: inline-block;
      padding: 0.75rem;
      color: aliceblue;
    }
    .nav__li :hover > a {
      color: #bbb;
    }
    .nav__li :hover {
      color: #bbb;
    }
    .nav__li a {
      color: white;
      text-decoration: none;
    }
    .nav__li i {
      width: 1.875rem;
      box-sizing: border-box;
      text-align: right;
      margin-left: 0.313rem;
    }
    * {
      font-weight: 100;
      font-size: 20px;
    }
    div {
      width: 100%;
      display: inline-block;
    }
    
    h1 {
      font-size: 24px;
    }
    h2 {
      text-align: left;
      font-size: 23px;
      padding: 1.5rem;
    }
    .nav__responsive-button{
        float: right;
    }
    @media only screen and (max-width: 50rem) {
      .nav-ul {
        display: none;
      }
    
      .nav__responsive-ul {
        display: block;
      }
    }
      <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>JSDevs</title>
            <script
              src="https://kit.fontawesome.com/8af7719ad1.js"
              crossorigin="anonymous"
            ></script>
            <link rel="stylesheet" href="css/style.css"
          </head>
          <body>
            <header>
              <h1>Header</h1>
              <nav class="nav">
                <ul class="nav-ul">
                  <li class="nav__li">
                    <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-address-card"></i
                    ><a href="#">Sobre nosotros</a>
                  </li>
                </ul>
                <ul class="nav__responsive-ul">
                  <div class="nav__responsive-button fas fa-bars"></div>
                  <div class="nav__li-container">
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-address-card"></i
                      ><a href="#">Sobre nosotros</a>
                    </li>
                  </div>
                </ul>
              </nav>
            </header>
          </body>

Esto solamente es un ejemplo que de lo cual puede servirte como una referencia.

2
  • Solo tuve problemas con que se mostrara el header de esa forma, un poco de modificación y quedo, me ha servido el método del nav, gracias! Commented el 11 ago. 2022 a las 13:59
  • Cuando una respuesta resuelve tu pregunta, se debe marcar con el check ✓ para que no quede pendiente tu pregunta. Y servirá también a otros con el mismo problema. Saludos Commented el 11 ago. 2022 a las 22:29

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.