0

Gostaria de saber como deixar a label, por exemplo "CNH" ao lado do input, conforme segue na imagem as labels estão distorcidas!

inserir a descrição da imagem aqui

1
  • Vc está usando algum tipo de framework tipo Bootstrap? Se possível coloque o que vc já tem de html/css que fica mais fácil para te dar uma resposta precisa.
    – hugocsl
    11/01/2018 às 17:20

2 Respostas 2

1

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>

1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .