Skip to main content
Código movido a snippet, ruido removido
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Float no me funciona!

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! heHe estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco sesi falta alguna etiqueta o estoy ignorando algo..

perdon por esto, pero no me deja enviar la pregunta...

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se 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>
  <!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>
    
CSS:



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

Float no me funciona!

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

perdon por esto, pero no me deja enviar la pregunta...

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

  <!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>
    
CSS:



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

Float no funciona

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>
 

se añadieron 1095 caracteres en el cuerpo
Origen Enlace
  <!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>
    
CSS:



 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>
    
  <!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>
    
CSS:



 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;
  }
}
Origen Enlace

Float no me funciona!

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

perdon por esto, pero no me deja enviar la pregunta...

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

  <!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>