Bom Dia!
Tenho o seguinte código:
<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>
A ideia é colocar nesta ordem:
1 label + 1 Checkbox + 1 espaço + 1 label + 1 chekbox + 1 espaço + 1 label + 1 type text
Estou usando esse css
para o label
:
label
{
width:100px;
height:40px;
line-height:40px;
display: inline-block;
vertical-align:middle;
}
e este css
para o checkbox
input[type=checkbox]
{
background-color:#CCCCCC;
width:40px;
height:40px;
}
O problema é que onde tem chekbox
os labeis
estão sendo exibidos abaixados em relação à linha.
Como concertar?
problema está na linha que tem : Oportunidade
, Cobertura
e Suite
Veja na figura abaixo