Nav doesn’t float right

Asked

Viewed 56 times

0

The buttons of my navbar do not float right. I have tried applying the float: right in the menu and also in the items but no use.

    .container{
       width: 100%;
       height: 100%;
       overflow-x: hidden;
    }

    body{
       font-family: Verdana, Geneva, Tahoma, sans-serif;
       background-image: url("imagens/cubos2.jpg");
       background-size: auto;
    }

    /*Formatações de itens do body*/
    .nav-menu{
       width: 100%;
       padding: 20px;
    }

    .nav-itens{
       padding: 30px;
       font-size: large;
       font-weight: bold;
       text-decoration: none;
    }

    .footer-menu{
       padding: 20px;
       position: absolute;
       bottom: 0;
    }

    .footer-itens{
       padding: 20px;
       text-decoration: none;
    }
<body class="container">
    <nav class="nav-menu">
        <a href="" class="nav-itens">Home</a>
        <a href="" class="nav-itens">Quem sou eu</a>
        <a href="" class="nav-itens">Como posso te ajudar</a>
        <a href="" class="nav-itens">Fale comigo</a>
    </nav>
    <div>
        <footer class="footer-menu">
            <a href="https://github.com/MatCunha" class="footer-itens">GitHub</a>
            <a href="https://www.behance.net/araujomathdb03" class="footer-itens">Behance</a>
            <a href="" class="footer-itens">LinkedIn</a>
        </footer>
    </div>
    <script src="script.js"></script>
</body>

html css

  • But why do you think you should float right if in css there are no rules in that direction?

2 answers

1

You probably put the float: right in the wrong place, see working in the example below:

.container{
   width: 100%;
   height: 100%;
   overflow-x: hidden;
}

body{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   background-image: url("imagens/cubos2.jpg");
   background-size: auto;
}

/*Formatações de itens do body*/
.nav-menu{
   width: 100%;
   padding: 20px;
   background-color: #000;
}
.nav-itens {
   float: right;
}
a {
  text-decoration: none;
  color: #FFF;
}
footer {
  margin-top: 500px;
  background-color: red;
}
<nav class="nav-menu">
    <a href="" class="nav-itens">Home</a>
    <a href="" class="nav-itens">Quem sou eu</a>
    <a href="" class="nav-itens">Como posso te ajudar</a>
    <a href="" class="nav-itens">Fale comigo</a>
</nav>
<div>
    <footer class="footer-menu">
        <a href="https://github.com/MatCunha" class="footer-itens">GitHub</a>
        <a href="https://www.behance.net/araujomathdb03" class="footer-itens">Behance</a>
        <a href="" class="footer-itens">LinkedIn</a>
    </footer>
</div>

1


To align the items on the right, you can use the text-align attribute with the right value, which means right, in English.

.container{
   width: 100%;
   height: 100%;
   overflow-x: hidden;
}

body{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   background-image: url("https://i.stack.imgur.com/LdGXk.gif");
   background-size: auto;
}

/*Formatações de itens do body*/
.nav-menu{
   width: 100%;
   padding: 20px;
   text-align: right;
   background-image: url("https://i.stack.imgur.com/z6X9L.gif");
   background-size: auto;
}
<body class="container">

    <nav class="nav-menu">
        <a href="" class="nav-itens">Home</a>
        <a href="" class="nav-itens">Quem sou eu</a>
        <a href="" class="nav-itens">Como posso te ajudar</a>
        <a href="" class="nav-itens">Fale comigo</a>
    </nav>
    <div>
        <footer class="footer-menu">
            <a href="https://github.com/MatCunha" class="footer-itens">GitHub</a>
            <a href="https://www.behance.net/araujomathdb03" class="footer-itens">Behance</a>
            <a href="" class="footer-itens">LinkedIn</a>
        </footer>
    </div>
<script src="script.js"></script>
</body>

Note: No need to use float, which can mess up your code.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.