Checkbox style changing style on label. How to pack?

0

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 in this order:

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

I'm using this css to label :

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

and this css to checkbox

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

The problem is that where% w / o% w / w% are displayed lower than the line.

How to arrange?

problem is in the line that has: chekbox , labeis and Oportunidade

See the figure below

    
asked by anonymous 02.04.2016 / 15:42

2 answers

0

Try adding this to LABEL's style:

float: left;

Make sure it meets your needs.

    
04.04.2016 / 18:32
0

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 in jsfiddle .

If it still does not fit, you can change it to a value in line-height: normal; , of class labelPequeno, to get it your way.

    
04.04.2016 / 18:38