Gostaria de saber como deixar a label, por exemplo "CNH" ao lado do input, conforme segue na imagem as labels estão distorcidas!
2 Respostas
Uma solução seria setar os contêineres das label
(ou das próprias label
, dependendo do caso) com: text-align: right;
. Isso irá alinhar o texto à direita próximo aos campos do formulário.
Exemplo:
div{
display: block;
width: 400px;
margin: 5px 0;
text-align: right;
}
<div>
<label>Carteira de trabalho:</label>
<input type="text" />
</div>
<div>
<label>CNH:</label>
<input type="text" />
</div>
<div>
<label>Número DNI:</label>
<input type="text" />
</div>
A resposta do @Miguel responde completamente a sua duvida. Embora possa haver uma outra abordagem. Imagino que você queira tanto os labels como os inputs com o mesmo comprimento, claro dependendo do tipo. Para isso você poderia criar um conjunto de classes, para configurar diferentes tamanhos. Exemplo:
.coluna-1{
width: 10%;
}
.coluna-2{
width: 20%;
}
.coluna-3{
width: 30%;
}
.coluna-4{
width: 40%;
}
.coluna-5{
width: 50%;
}
.coluna-6{
width: 60%;
}
.coluna-7{
width: 70%;
}
.coluna-8{
width: 80%;
}
.coluna-9{
width: 90%;
}
.coluna-10{
width: 100%;
}
[class^="coluna-"]{
display: inline-block;
}
.linha{
display: flex;
display: -webkit-flex;
}
.alinhamento{
text-align: right;
margin-right: 1vw;
}
Então bastaria você indicar qual seria o tamanho de cada label e de cada input, e com base nisso você poderia usar o atributo text-align
para alinhar os labels da forma que desejar.
Exemplo com html:
.coluna-1{
width: 10%;
}
.coluna-2{
width: 20%;
}
.coluna-3{
width: 30%;
}
.coluna-4{
width: 40%;
}
.coluna-5{
width: 50%;
}
.coluna-6{
width: 60%;
}
.coluna-7{
width: 70%;
}
.coluna-8{
width: 80%;
}
.coluna-9{
width: 90%;
}
.coluna-10{
width: 100%;
}
[class^="coluna-"]{
display: inline-block;
}
.linha{
display: flex;
display: -webkit-flex;
}
.alinhamento{
text-align: right;
margin-right: 1vw;
}
<div class="linha">
<label class="coluna-2 alinhamento">
Data de Nascimento
</label>
<input type="number" class="coluna-3" placeholder="Apenas números">
<label class="coluna-2 alinhamento">
Municipio
</label>
<input class="coluna-3" type="text">
</div>
<div class="linha">
<label class="coluna-2 alinhamento">
Nome da mãe
</label>
<input type="number" class="coluna-3" placeholder="Apenas números">
<label class="coluna-2 alinhamento">
Nome do pai
</label>
<input class="coluna-3" type="text">
</div>
Isso é apenas um esboço de sistema de grid, muito bem explicado no W3C.