Alinhamento de Input checkbox*

27 de abril de 2017 5 respostas

AleQuinteiro 27 de abril de 2017

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;


    }

5 Respostas

jonathan.sky 27 de abr. de 2017 1 like

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.

AleQuinteiro 27 de abr. de 2017

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:

wallacecampanha 27 de abr. de 2017

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

AleQuinteiro 28 de abr. de 2017

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>

wallacecampanha 28 de abr. de 2017

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

Criado 27 de abril de 2017

Ultima resposta 28 de abr. de 2017

Respostas 5

Participantes 3

5 Respostas

Topicos relacionados