Alinhamento de Input checkbox*

Front-end
, , ,
#1

Fala pessoal, beleza?

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

<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>



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;


    }
#2

margin=“center”, interessante seria usar, max-height e width, com objetivo de deixar mais responsivo. Ou até então, @media, assim poderá controlar o fluxo, dependendo do tamanho dá tela.

1 curtida
#3

Jonathan, valeu pelo retorno…

Desculpa minha ignorância, mas não entendi muito bem, No caso para poder solucionar o posicionamento do meu checkbox, colocar o margin =“center”?

Da uma olhada como ela fica na page:

image.png789×203 7.53 KB

#4

Uma dica para melhorar ai é adicionar o SIM e o NAO dentro de um SPAM cada um.
assim posicionando junto ao checkbox.

#5

Valeu Wallace pelo toque, olha oque eu fiz para alinhar os checkbox

Eu gostaria de colocar os input assim:

Indicação: ()
Redes Sociais ()
e-mal: ()

Coloquei a tag <“br”> pra ver se daria para quebrar a linha, mas não rolou… oque vc indicaria?

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

Agora só seguir o padrão acima no resto do código e fazendo as devidas alterações no css da class SPAM inserida. Abraço!