HTML Mover itens no html e css

Murillo Fagundes Gonçalves · 7 de junho de 2019

Boa noite galera estou com uma duvida no html e css estou tentando mover o "BOTÃO" chamado comprar para o lugar que a foto indica

alguém poderia me ajudar com o código de mover ele? sendo css e html

aq esta os codigo que estou tentando usar mas nao adianta ele nao se move

então se alguém poder me ajudar com o código agradeço


                <div class="menu">
                                <li><a href="#">Comprar</a></li>
                </div>

.menu{
  margin: auto;
  justify-content: space-between; 
  padding-left: 10px;
  padding-top: 200px;
}

GabrielSennaMs · 8 de junho de 2019

Bom @Murillo Fagundes Gonçalves, fica difícil poder ajuda com o html e o css limitado que você passo.

Tem alguns erros no HTML, o elemento li deve estar dentro do seus pais ul ou ol!

O CSS que você colocou está meio estranho, já que você adiciona uma padding-top muito alto, e um justify-content space-between que não vai alinhar o conteúdo, já que o div por padrão é um elemento bloco.

Você pode dar uma olhada na W3schools tem um ótimo tutorial de CSS lá!

Esse link tem uma demostração de um menu top com botões alinhados a direita e esquerda.

https://www.w3schools.com/howto/howto_css_topnav_right.asp

Também vou deixar um exemplo de navbar(Barra de navegação) fixo no top com alinhamentos em duas posições.

CSS:

 html, body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .navbar{
            width: 100%;
            background: #272727;
            position: fixed;
            margin: 0;
            box-shadow: 0px 3px 8px #272727;
            height: 53px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .navbar > nav.navbar-nav{
            max-width: 1000px;
            margin: 0 auto;
            clear: both;
            display: block;
        }

        .navbar > .navbar-nav > .navbar-align{
            display: block;
            margin: 0;
            padding: 0;
        }

        .navbar > .navbar-nav > .navbar-align > ul{
            list-style: none;
            margin: 0;
            padding: 8px;  
        }

        .navbar > .navbar-nav > .navbar-align.left{
            float: left;
        }

        .navbar > .navbar-nav > .navbar-align.right{
            float: right;
        }

        .navbar > .navbar-nav > .navbar-align > ul > li.navbar-item{
            display: inline-block;
            margin: 0;
            padding: 0;
        }   

        .navbar > .navbar-nav > .navbar-align > ul > li.navbar-item > a.navbar-link{
            color: #fff;
            text-decoration: none;
            display: block;
            padding: 8px 16px;
            text-align: center;
            font-weight: 500;
            transition: 0.4s;
            margin: 0;
        }

        .navbar > .navbar-nav > .navbar-align > ul > li.navbar-item > a.navbar-link:hover{
            text-decoration: none;
            background: #fff;
            color: #272727; 
            transition: 0.4s;
        }

HTML:

<div class="navbar">
        <nav class="navbar-nav">
            <div class="navbar-align left">
                <ul>
                    <li class="navbar-item">
                        <a class="navbar-link" href="#">Home</a>
                    </li>
                    <li class="navbar-item">
                        <a class="navbar-link" href="#">Notícias</a>
                    </li>
                    <li class="navbar-item">
                        <a class="navbar-link" href="#">Galeria</a>
                    </li>
                    <li class="navbar-item">
                        <a class="navbar-link" href="#">Contato</a>
                    </li>
                </ul>
            </div>
            <div class="navbar-align right">
                <ul>
                    <li class="navbar-item">
                        <a class="navbar-link" href="#"><i style="padding-right: 4px;" class="faz fa-shopping-cart"></i></a>
                    </li>
                    <li class="navbar-item">
                        <a class="navbar-link" href="#">Comprar</a>
                    </li>
                </ul>    
            </div>
        </nav>
    </div>

Essa é a biblioteca de icones usado no exemplo

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">