Galera é o seguinte, estou fazendo um formulário e quero que a label fique em cima do input, porém não consegui isso porque usei o float: left
para deixar os inputs um do lado do outro, porém eu quero que ao invés de ficar assim:
Fique com o label "Insira seu nome ..." por exemplo, em cima do input "Insira seu nome" e assim por diante
Esse é meu códico css:
.form{
width:80%;
height:750px;
border-radius:4px;
border:2px solid #fff;
background:#fff;
margin-top:150px;
color:black;
}
.form .navbar_form {
width:100%;
height:60px;
background:#a0a0a0;
}
.form .navbar_form img{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
float:left;
margin-top:5px;
margin-left:20px;
}
.form .navbar_form h1{
padding:10px;
color:#fff;
letter-spacing:2px;
text-transform:uppercase;
font-family:Arial;
}
.form input[type="text"]{
position:relative;
margin:10px;
top:15%;
left:8%;
border:none;
outline:none;
border-bottom:1px solid red;
background:transparent;
width:40%;
height:30px;
float:left;
}
.form button{
float:right;
margin-right:40px;
width:35%;
border:none;
outline:none;
height:40px;
color:#fff;
background:#fb2525;
font-size:18px;
border-radius:20px;
}
.form #action_Card {
position:relative;
top:60%;
display:inline-block;
width:100%;
height:40px;
background:yellow;
}
Meu html:
<center><form action="/cad" method="POST">
<div class="form">
<div class="navbar_form">
<img src="/img/logo.jpeg">
<h1>Cadastro de usuarios</h1>
</div>
<label>Insira seu nome:*</label>
<input type="text" name="nome" placeholder="Insira seu nome"/>
<label>Insira seu sobrenome:*</label><br>
<input type="text" name="sobrenome" placeholder="Insira seu sobrenome"/> <label>Insira seu nome de usuario:*</label><br> <input type="text" name="username" placeholder="Insira seu usuario"/> <label>Insira seu email:*</label><br> <input type="text" name="email" placeholder="Insira seu email"/> <label>Insira sua senha:*</label><br> <input type="text" name="password" placeholder="Insira sua senha"/> <label>Confirme sua senha:*</label>
<input type="text" placeholder="Confirme sua senha"/>
<div id="action_Card">
<button type="button">Criar conta</button>
</div>
</div>
Gente, vou ajustar melhor a posição da div actionCard
e tirar esse background amarelo depois, só coloquei pra mim poder ver melhor.