bruno.batista 24 de out. de 2021 1 like
Boa noite, depende do objetivo, se o site vai ser responsivo ou não, mas penso que o que está abaixo ajuda, de uma olhada também no:
https://www.w3schools.com/w3css/default.asp
.nome {
width: 210 px ;
float: left ;
margin-left: 10 px ;
}
.sobrenome {
width: 200 px ;
float: left ;
}
h1 {
font-size: medium ;
font-family: sans-serif , Helvetica , arial ;
}
.nome label {
color: black ;
font-size: 15 px ;
font-weight: lighter ;
font-family: Arial , Helvetica , sans-serif ;
}
.nome input {
background-color: #EEE;
border-radius: 3 px ;
width: 200 px ;
height: 20 px ;
}
.sobrenome label {
color: black ;
font-size: 15 px ;
font-weight: lighter ;
font-family: Arial , Helvetica , sans-serif ;
}
.sobrenome input {
background-color: #EEE;
border-radius: 3 px ;
width: 200 px ;
height: 20 px ;
}
Lucas_Camara 24 de out. de 2021 2 likes
Recomendo usar flex (flexbox layout ) para controlar isso. Veja um exemplo simples:
<!DOCTYPE html>
< html >
< head >
< title > Page Title</ title >
< style >
. container {
width : 100 % ;
display : flex ;
}
div {
width : 100 % ;
height : 50 px ;
}
div # div1 {
background-color : aqua ;
}
div # div2 {
background-color : black ;
}
div # div3 {
background-color : red ;
}
</ style >
</ head >
< body >
< div class = "container" >
< div id = "div1" ></ div >
< div id = "div2" ></ div >
< div id = "div3" ></ div >
</ div >
</ body >
</ html >
Repare na classe css container , a propriedade display: flex;.
Experimente adicionar na classe container a propriedade: flex-direction: column;, e repare como as divs mudam de posição.
Para aprender mais sobre flexbox, esse site é muito bacana: https://flexboxfroggy.com/
wldomiciano 24 de out. de 2021 2 likes
Daria pra fazer assim também:
<h1> Dados de Cadastro:</h1>
<div class= "wrapper" >
<div class= "nome" >
<label for= "nome" ><strong> Nome</strong></label><br>
<input type= "text" name= "nome" id= "name" required >
</div>
<div class= "sobrenome" >
<label for= "sobrenome" ><strong> Sobrenome</strong></label><br>
<input type= "text" name= "sobrenome" id= "sobrenome" required >
</div>
</div>
<style>
.wrapper {
display: flex;
column-gap: 24px;
}
</style>
No caso eu envolvi as 2 <div> com outra <div> e removi o <br>.
É basicamente o que o Lucas mostrou, mas fica aqui meu código só pra registro
Esdefi 26 de out. de 2021 1 like
Obrigada, gente! Deu super certo aqui colocar o “display:flex”. Sou iniciante em des. web e ainda não conhecia essa propriedade.
