CSS HTML

HTML/CSS: Como colocar inputs lado a lado?

18 de abril de 2020

HTML/CSS: Como colocar inputs lado a lado?

Neste artigo você vai aprender como colocar inputs lado a lado, e não só este elemento do HTML mas qualquer outro que você queira de uma maneira fácil.

inputs lado a lado capa

Fala programador(a), tudo bem? Bora aprender coisa nova!

Quando inserimos dois inputs em um HTML, eles são separados por um pequeno espaçamento

E caso você inspecione o HTML não há margin ou padding entre eles, então de que forma podemos eliminar este espaçamento?

A maneira mais fácil de resolver este problema é adicionando um float aos elementos com o valor de left

Desta forma os dois elementos ficarão unidos, sem este espaçamento

Vamos ver um exemplo prático:

<!DOCTYPE html>
<html>
<head>
    <title>Deixando inputs lado a lado</title>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <input type="text" name="name" placeholder="Nome">
        <input type="text" name="lastname" placeholder="Sobrenome">
    </div>
</body>
</html>

 

Digamos que queremos separar nome e sobrenome em dois inputs, pois o nosso banco de dados está assim

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Mas queremos dar uma ideia de que estes dois dados são a mesma coisa, unindo os inputs

Então veja o que é representado na página:

inputs lado a lado ex1

Bom, temos o comportamento mencionado, agora vamos ao CSS para ajustar isso, veja:

input {
    /* junta os inputs */
    float: left;
    /* estilos adicionais */
    border: none;
    padding: 10px;
    width: 200px;
}

div {
    border: 1px solid #CCC;
    height: 35px;
    width: 440px;
}

E agora temos o seguinte resultado:

inputs lado a lado ex2

E assim resolvemos nosso problema de uma forma bem elegante 🙂

Conclusão

Neste artigo vimos como colocar inputs lado a lado

Apenas precisamos adicionar um float com valor left ao CSS, e os inputs ficarão próximos

Isso serve para outros elementos também!

O problema acontece por que ele possui um display de inline-block, o que torna ele um bloco separado do outro, aí ele cria aquele espaço que não há margin ou padding

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x