Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Raíne Santana

[Resolvido] Problemas para dar espaçamento entre <label>

Recommended Posts

Estilizei o seguinte formulário com o respectivo código css:

 

<fieldset class="informacoesPessoais">
                               <label for="CPF">CPF: </label><input type="text" id="CPF" name="CPF" /><br />
                               <label for="Pacote" id="Pacote">Pacote: <select name="Pacote">   
                                           <option value="1">Sky FIT 2O12</option>
                                           <option value="2">Sky LIGHT 2012</option>
                                           <option value="3">Sky MIX 2012</option>
                                       </select>
                                   </label><br />
                               <label for="Nome">Nome: </label><input type="text" id="Nome" name="nome" /><br />
                               <label for="Sobrenome">Sobrenome: </label><input type="text" id="Sobrenome" name="Sobrenome" /><br />
                               <label for="RG">RG: </label><input type="text" id="RG" name="RG" /><br />
                               <label for="Sexo">Sexo: </label><input type="text" id="Sexo" name="Sexo" /><br />
                               <label for="DataNascimento">Data de Nascimento: </label><input type="text" id="DataNascimento" name="DataNascimento" /><br />
                               <label for="Email" href="css/form/assine-sky.css.css" rel="stylesheet" type="text/css">Email: </label><input type="text" id="Email" name="email" /><br />
                           </fieldset>

 

CSS:

 

#FormAssineSky{
   width: 915px;
   background: #F0F1F1;
   padding: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

#FormAssineSky legend{
   padding: 8px;
   border-bottom: 1px #ccc solid;
   color: #661013;
   width: 896px;
   margin: 0 0 20px 0;
}

#FormAssineSky input[type="text"]{
   width: 310px;
}

#FormAssineSky textarea{
   width: 390px;
   height: 120px;
}

#FormAssineSky br{
   clear: left;	
}

#FormAssineSky .informacoesPessoais, .informacoesGerais, .instalacao{
   margin-top: 20px;
}

#FormAssineSky .informacoesPessoais label, #FormAssineSky .informacoesGerais label, #FormAssineSky .informacoesGerais input, #FormAssineSky .informacoesPessoais input {
   float: left;
   display: block;	
   margin-bottom: 20px;
}
#FormAssineSky .instalacao label, #FormAssineSky .instalacao input{
   float: left;
   display: block;	
   margin-bottom: 20px;
}

#FormAssineSky .informacoesPessoais label, .informacoesGerais label, .instalacao label{
   width: 201px;
}

 

Estava tudo bem até eu inserir um select. Queria dar espaçamento entre a label e o select, mas não consigo. O formulário fica da seguinte forma:

 

CPF:____________________ [LABEL]

PACOTE:[sELECT]

NOME:___________________ [LABEL]

 

Já tentei achar material na internet mas não obtive sucesso. Alguém pode me dar uma dica? Ou me dizer como fazer?

 

Agradeço desde já.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Feche o label do select antes dele. Caso não faça isso, não há necessidade do atributo "for".

 

Feito isso, declare um float:left para o select, e uma largura suficiente para o próximo label "quebrar" de linha. :thumbsup:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigada pelas respostas. Tentei primeiramente o que o Wanderson Valerio disse, no entanto depois me dei conta de que só era necessário fazer o que o André Campos sugeriu. Obrigada meninos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.