How to align label next to the input

Navigation
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!

    
asked by anonymous 11.01.2018 / 17:50

2 answers

1

One solution would be to set the containers of label (or label itself, depending on the case) with: text-align: right; . This will align the text to 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>
    
11.01.2018 / 18:57
1

@Miguel's answer completely answers your question. Although there may be another approach. I imagine you want both labels and 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 just have to indicate the size of each label and each input, and based on that you could use the text-align attribute to align the labels the way you want.

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 an outline grid system, very well explained in the W3C .

    
11.01.2018 / 19:34
RecyclerView ScrollListener - Animate view visibility Script to check if directory is empty