Checkbox style changing label style. How to tidy up?

Question

Good Morning!

I have the following code:

 <div style="float:left;">
   <label class="labelPequeno">Oportunidade</label><input type="checkbox" id="oportunidade" name="oportunidade" />
 </div>

 <div style="width:85px;height:40px; float:left;"></div>    

 <div style="float:left;">
   <label class="labelPequeno">Cobertura</label><input type="checkbox" id="cobertura" name="cobertura" />
 </div>

 <div style="width:85px;height:40px; float:left;"></div>    

 <div style="float:left;">
   <label class="labelPequeno">Suite</label><input type="text" onkeypress="return SomenteNumero(event)" class="typeTextPequeno" maxlength="15" id="suite" name="suite"  /> <br /> <br />
 </div>

The idea is to put this order:

 1 label + 1 Checkbox + 1 espaço + 1 label + 1 chekbox + 1 espaço + 1 label + 1 type text

I’m wearing this css to the label:

label
{
  width:100px;
  height:40px;
  line-height:40px; 
  display: inline-block;
  vertical-align:middle;
}

and this css to the checkbox

input[type=checkbox]
{
  background-color:#CCCCCC;
  width:40px;
  height:40px;
}

The problem is where chekbox the labeis are being displayed lowered relative to the line.

How to fix?

problem is on the line that has : Oportunidade, Cobertura and Suite

See in the figure below

Answer 1

Try adding this to the LABEL style:

float: left;

Check if it satisfies your need.

Answer 2

Add this CSS code.

label.labelPequeno {
    line-height: normal;
}

This problem is happening because of the line-height it takes from the label class.

See the example on jsfiddle.

If it still doesn’t fit, you can change it to a line-height: normal;, of the labelPequene class, so it stays your way.