1

Fala pessoal, beleza?

Sou iniciante, acabou surgindo uma dificuldade de alinhar meu checkbox, se alguém puder dar uma dica de como devo proceder, segue o trecho do meu HTML:

<li>
    <label class="bloco">Deseja receber novidades por email:</label>
    <input type="radio" name="novidade" checked /> Sim
    <input type="radio" name="novidade" /> Não
</li>
<li>
    <label class="bloco">Como nos encontrou?</label>
    Indicação <input type="checkbox" name="divulg" /> <br>
    Redes Sociais <input type="checkbox" name="divulg" /> <br>
    E-mail <input type="checkbox" name="divulg" /> 
</li>

E CSS:

form#contato ul li label {
    display: inline-block;
    width: 80px;
    font: 18px Lucida; }

form#contato ul li label.bloco {
    display: block;
    width: 50%;
    margin: center;
    height: 30px; }

label.bloco {
    font-weight: italic;
    font-family: lucida;
    font-size: 18px; }
4
  • Vi que se cadastrou hoje na comunidade, talvez seja interessante fazer o tour caso já não tenha feito. Não poste seus códigos como imagem, o sistema possui suporte nativo para os mesmos, basta copiá-lo na pergunta, selecioná-lo e clicar no botão { } para formatá-lo corretamente (ou pressionar o atalho CTRL + K).
    – Woss
    Commented 27/04/2017 às 1:23
  • para fazer o alinhamento de chebox você pode está utilizando o "vertical-align" do CSS, mas isso se torna mais fácil se você trabalhar com classes diferentes, dos demais elementos do formulário, exemplo: ![Alinhamento de checkbox](i.sstatic.net/NgrJB.png) Commented 27/04/2017 às 1:39
  • Teria como postar o código fonte ao invés das imagens? Aproveitando. tente criar um Exemplo Mínimo, Completo e Verificável para nos ajudar a identificar o seu problema. Você sempre pode fazer otour e entender melhor o funcionamento geral do site. xD
    – Randrade
    Commented 27/04/2017 às 1:43
  • Obrigado pelo toque, desculpe a falha!! Commented 27/04/2017 às 3:31

1 Resposta 1

2

Para fazer um checkbox com um frase, coloque um label em volta de cada checkbox, dessa forma ao clicar na frase ele também clica no input:

<label>
Indicação <input type="checkbox" name="divulg" />
</label>

eu retirei o width que você havia colocado, caso ainda esteja desalinhado, tente aumentar o width e pode alinhar o input da seguinte forma:

label{
    display:inline-block;
    font:18px Lucida;
    float:left;
}
label input{
  float: left;
}
3
  • Bacana, deu certo! Consegui solucionar meu problema! Commented 27/04/2017 às 18:04
  • olá eu reparei no seu código que faltou vocÊ colocar o value no seu checkbox Commented 28/06/2018 às 9:58
  • @Danilorodrigues Sim, no caso eu fiz igual ao exemplo dele, também não é necessário colocar value no checkbox, por padrão o value dele já é "on"
    – spacedogcs
    Commented 28/06/2018 às 11:41

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 .