4

Preciso alinhar dois buttons desta maneira

eles devem estar exatamente um ao lado do outro, mas cada um em uma extremidade

2 Respostas 2

4

Você pode usar as propriedades e valores display: flex e justify-content: space-between na div pai

.divPai {
 width: 100%;
 display: flex;
 justify-content: space-between;
}
<div class="divPai">
  <button> Esquerda </button>
  <button> Direita </button>
</div>

Com isso os itens são distribuídos uniformemente na linha; o primeiro item é renderizado no incio do elemento pai, e o último item no final do elemento pai. Se houver mais de dois elementos o espaçamento entre os demais serão sempre iguais.

Caso queira ver mais sobre flexBox esse guia é bem completo:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0

Verifique se o código abaixo atende a sua necessidade.

#div { width: 300px; }
.floatL { float: left; }
.floatR { float: right; }
<div id="div">
<input class="floatL" type="button" value="Esquerda" />
<input class="floatR" type="button" value="Direita" />
</div>

2
  • acho que é isso msm, valeu Commented 14/10/2017 às 2:30
  • 1
    @Bloodplus acho que tu deveria olhar a solução com flexbox, principalmente porque flexbox é algo que deve ser estudado, são muito mais opções para lidar. Da pra pensar na flexbox como uma evolução do float para layout
    – evandrobm
    Commented 17/10/2018 às 20:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .