Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como faço para deixar label e input alinhados um do lado do outro ?

Olá, Boa noite!

No curso o instrutor no orienta a deixar o formulário com label em cima e input em baixo, porém eu gostaria de saber como que faço para deixar um do lado do outro sem que o mesmo fique desalinhados, tem uma técnica pra isso usando o próprio css ?

4 respostas

Opa Rene, exitem algumas técnicas pra isso, mas eu recomendo você estudar um pouco sobre flexbox, especificação nova do css3 que ajuda bastante no alinhamento dos elementos tanto na vertical quanto na horizontal.

Temos curso de flexbox aqui.

Opa, Wanderson ! Beleza ?

Então eu já fiz esse curso :D, porém eu gostaria de saber pra que deixar uma label do lado do input eu preciso isolar a label e o input como por exemplo , posso isolar elas com div ? Ou se isso prejudica a semântica?

/*HTML*/
<fieldset>
<div>
        <label for="nome">Nome</label>
        <input texto="text" name="nome" id="nome">

   <label for="nome">Nome</label>
        <input texto="text" name="nome" id="nome">
</fieldset>

/*CSS */
fieldset{
        width: 30%;
}
div{
       display: flex;
      aling-items: center;
      justify-content: space-between;
}

Dessa forma esta correto Wanderson ?

Prejudica a sementâtica do HTML?

solução!

Rene, pelo que testei, ele faz exatamente o que você quer, certo? Se sim, então tá certo. O restante é gosto pessoal.

Dependendo do caso, eu prefiro isolar cada grupo de label + input dentro de uma div separada. Mas há pessoas que prefiram não fazer isso ou fazer diferente. Não tem um certo ou errado, entende? Depende muito de cada caso.

Muito Obrigado, Wanderson! Abraço!