0

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

inserir a descrição da imagem aqui

2 Respostas 2

0

Tente adicionar isso ao style do LABEL:

float: left;

Verifique se satisfaz a sua necessidade.

1
  • Obrigado, adicionei este estilo apenas aos 2 labels problemáticos. rsrs 4/04/2016 às 16:46
0

Adiciona esse código CSS.

label.labelPequeno {
    line-height: normal;
}

Está acontecendo este problema por causa do line-height que ele pega da classe label.

Veja o exemplo no jsfiddle.

Caso mesmo assim não fique ajustado, você pode alterar para um valor no line-height: normal;, da classe labelPequeno, para que fique do seu jeito.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .