Checkbox alignment

Question

Checkbox alignment

Asked 7 years, 2 months ago

Viewed 3,766 times

0

Talk to me, baby?

I’m a beginner, I ended up having a difficulty aligning my checkbox, if someone can give a hint of how I should proceed, follow the excerpt of 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; }

I saw that you signed up today in the community, maybe it’s interesting to do the tour in case you haven’t already. Do not post your codes as image, the system has native support for them, just copy it on the question, select it and click the button { } to format it properly (or press the shortcut CTRL + K).

– Woss

2017/04/27 at 01:23
To do the chebox alignment you may be using the "vertical-align" CSS, but this becomes easier if you work with different classes, from the other form elements, example:

– Wesley A. Alves

2017/04/27 at 01:39
Could you post the source code instead of the images? Taking advantage. try to create a [mcve] to help us identify your problem. You can always do the[tour] and better understand the overall functioning of the site. xD

– Randrade

2017/04/27 at 01:43
Thanks for the touch, sorry for the glitch!!

– Alexandre Quinteiro

2017/04/27 at 03:31

1 answer

Browser other questions tagged html css checkbox

You are not signed in. Login or sign up in order to post.

by spacedogcs • **290** points · Answer 1 · 2017-04-27T16:43:41+00:00

To make a checkbox with a phrase, put a label around each checkbox, so by clicking on the phrase it also clicks on 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 can align the input as follows:

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