Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde a todos!
Estou começando a estudar html e estou com uma pequena dúvida.
Estou tentando alinhar o label em cima do input. Porém também preciso que os campos fiquem um do lado do outro. Alguém poderia me ajudar?
Segue apenas um exemplo.
<!--<p>
<label for="nome">Nome:</label><br><input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome">
<label for="sbnome">Sobrenome:</label><br><input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome">
</p>
<p>
<label for="email">E-mail:</label><input type="email" name="email" id="email" placeholder="Digite aqui seu email">
<label for="idade">Idade:</label><input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade">
<label for="cpf">CPF:</label><input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF">
</p>
<p>
<label for="cep">CEP:</label><input type="number" name="cep" id="cep" placeholder="Digite aqui seu cep">
<label for="endereco">Endereço:</label><input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço">
<label for="senha">Senha:</label><input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha">
</p>-->Montei um exemplo básico para demonstrar, segue:
<!DOCTYPE html>
<html>
<head>
<title>Alinhamento</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
* { color: #666; padding: 0; margin: 0; }
.bloco { float:left; }
.bloco .box { width: 200px; display: inline block; }
input { padding: 5px; margin-right: 5px; }
</style>
</head>
<body>
<div class="bloco">
<div="box">
<label for="login">Login</label><br>
<input type="text" name="login"/>
</div>
<div="box">
<label for="login">Senha</label><br>
<input type="password" name="senha"/>
</div>
<input type="submit" value="LOGAR" />
</div>
</body>
</html>
Pesquise por *display *e *float*, aí entenderá bem como funciona.<!--
luisfeliperm
Instrução:
Sempre que for adicionar uma INPUT faça o seguinte
Coloque-a dentro de uma DIV com CLASS="ITEM"
-->
<div class="div-itens">
<div class="item">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome">
</div>
<div class="item">
<label for="sbnome">Sobrenome:</label>
<input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome">
</div>
</div>
<div class="div-itens">
<div class="item">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Digite aqui seu email">
</div>
<div class="item">
<label for="idade">Idade:</label>
<input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade">
</div>
<div class="item">
<label for="cpf">CPF:</label>
<input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF">
</div>
</div>
<div class="div-itens">
<div class="item">
<label for="cep">CEP:</label>
<input type="number" name="cep" id="cep" placeholder="Digite aqui seu cep">
</div>
<div class="item">
<label for="endereco">Endereço:</label>
<input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço">
</div>
<div class="item">
<label for="senha">Senha:</label>
<input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha">
</div>
</div>
<style>
.div-itens{
margin:30px 10px;padding:5px;
border:1px solid blue;
overflow: hidden;
}
.div-itens .item{
border:1px solid red;
padding:5px;float: left;
}
.div-itens .item label{
display: block;
}
</style>
Olá gomes94
Você precisa criar colunas para poder alinhar os campos como deseja.
Um bom exercício para começar!
Precisando estamos aqui. Boa sorte nos estudos!