Checkbox Alignment

0

Personal speech, beauty?

I'm a beginner, I ended up with a difficulty to align my checkbox, if anyone can give a hint how I should proceed, follow the excerpt from my 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>

And 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; }
    
asked by anonymous 27.04.2017 / 03:15

1 answer

1

To make a checkbox with a phrase, place a label around each checkbox, so by clicking on the phrase it also clicks the input:

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

I removed the width you had placed, if it is still misaligned, try to increase the width and you can align the input as follows:

label{
    display:inline-block;
    font:18px Lucida;
    float:left;
}
label input{
  float: left;
}
    
27.04.2017 / 18:43