CSS Colocar botões alinhados na direita e esquerda

Gabriel Pacífico · 19 de fevereiro de 2021

Olá, queria colocar dois botões alinhados, um na esquerda e um na direita, poderiam me ajudar? quero colocar o "voltar" na marcação vermelha e o "cadastrar" na marcação verde

<div style="display: inline-block; margin-top: 30px">
		<a href="index.php" role="button" class="btn btn btn-primary">Voltar</a> 
		<button type="submit" class="btn btn-success btn">Cadastrar</button> 
</div>

navegador2 · 20 de fevereiro de 2021

Bom dia!

Você não falou se está fazendo no código ou usando um gerenciador de conteúdo, como o Wordpress, mas se for no código talvez isto ajude

Você pode criar uma section e dentro da mesma 2 divs, uma ao lado da outroa, cada uma com 50% da largura da section.

Então em cada div você coloca o botão e poderá alterar o alinhamento um em right (direita) o outro lef(esquerda). Um tex-aling: Deve resolver isto.

Vou ver se arrumo um tempo, se conseguir, eu posto o código mais tarde.

Gabriel Pacífico · 20 de fevereiro de 2021

@navegador2 eu consegui resolver o problema, utilizei um style="float: left" e style=" float: rigth" e resolveu!

navegador2 · 20 de fevereiro de 2021

6 horas atrás, Gabriel Pacífico disse:

@navegador2 eu consegui resolver o problema, utilizei um style="float: left" e style=" float: rigth" e resolveu!

Bacana que bom que você consegui, eu até fiz um código rápido, mais ou menos como seria minha ideia.

!DOCTYPE html>
<html lang="pt-Br">
<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>Botões</title>

    <style>
        #container {
            height: 100px;
            background-color: rgb(185, 183, 183);
           
            
        }
        #divleft {
            float: left;
            width: 48%;
            margin-right: 2%;
            height: 50px;
            background-color: rgb(156, 155, 155);
            margin-top: 25px;
            
           
        }

        #divright {
            float: left;
            width: 48%;
            margin-right: 2%;
            height: 50px;
            background-color: rgb(138, 137, 137);
            text-align: right;
            margin-top: 25px;

           
           
        }

        #voltar {
            width: 50%;
            height: 30px;
            background-color: green;
            
        }
        .btn-btn-success {
            width: 50%;
            height: 30px;
            background-color: green;
            
        }
    </style>
</head>
<body>
    <div id="container">

        <div id="divleft">
            <input type="text" id="voltar" name="voltar" value="Voltar">
        </div>
        
        <div id="divright">
           
            <button type="submit" class="btn-btn-success">Cadastrar</button>
        </div>

    </div>
    
</body>
</html>