Como colocar um campo ao lado do outro?

20/08/2019

7

Olá pessoal !!!
Estou tentando fazer um formulário de cadastro, mas estou com um probleminha rsrs, gostaria de colocar alguns campos um do lado do outro,
até consigo mas um pertinho do outro e assim não fica tão legal.

Por exemplo:
Nome __________ Sobrenome ___________ Gostaria de estar deixando assim

Nome__________ Sobrenome_____________ Mas só fica assim

Desde de já agradeço ajuda....
Responder

Posts

20/08/2019

Gérson

Boa noite amigo. Ótima pergunta.
Inicialmente ja recomendo assistir o curso de CSS:
https://www.devmedia.com.br/curso/curso-css/2213

Vou deixar também este exemplo no meu github:
https://github.com/gerssonmg/begin-html/tree/master/HTML_formulario_001

Pode ser feito da seguinte maneira:
Fiz dois exemplos. Um ficando lado a lado, e outro um a baixo do outro.

Note que utilizei uma:

class="lado-a-lado"

e outra

class="cima-baixo"

Estas duas foram definidas no meu arquivo CSS.

<form class="lado-a-lado">
<label>Nome:</label>
<input type="text" name="nome">

<label>Sobrenome:</label>
<input type="text" name="sobrenome">
</form>

<form class="cima-baixo">
<label>Nome:</label>
<input type="text" name="nome">

<label>Sobrenome:</label>
<input type="text" name="sobrenome">
</form>


Código CSS:
A propriedade display: inline
Faz com que os elementos fiquem na mesma linha
A propriedade display: block
Faz com que os elementos fiquem um a baixo do outro

Obs: Pode ter varições, vai depender do elemento que esta estilizando.


.lado-a-lado input {
display: inline;
margin-right: 30px
}

.lado-a-lado {
margin-bottom: 30px;
}

.cima-baixo input {
display: block;
}

Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira