0
I would like to know how to leave the label, for example "CNH" next to the input, as follows in the image the Labels are distorted!
2 answers
1
The @Miguel response completely answers your question. Although there may be another approach. I imagine you want both the Abels and the inputs of the same length, of course depending on the type. For this you could create a set of classes, to configure different sizes. Example:
.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;
}
Then you could just indicate the size of each label and each input, and based on that you could use the attribute text-align to align the Honeys as you wish.
Example with 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>This is just a grid system outline, very well explained in W3C.
1
A solution would be to define the containers of label (or their own label, depending on the case) with: text-align: right;. This will align the text on the right next to the form fields.
Example:
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>Browser other questions tagged php html css
You are not signed in. Login or sign up in order to post.
Are you using some kind of Bootstrap framework? If possible put what you already have of html/css that is easier to give you an accurate answer.
– hugocsl