Colocar divs lado a lado em um formulário

Front-end HTML
#1

Estou tentando colocar as divs “nome” e “sobrenome” lado a lado neste formulário, porém, já tentei de todas as formas. Tentei colocando display:inline-block na tag div, mas não tem resultado algum.

    <h1>Dados de Cadastro:</h1>

    <div class="nome">

    <label for="nome"><strong>Nome</strong></label><br>

    <input type="text" name="nome" id="name" required>

    </div>

    <br>

    <div class="sobrenome">

    <label for="sobrenome"><strong>Sobrenome</strong></label><br>

    <input type="text" name="sobrenome" id="sobrenome" required>

    </div>

CSS:
h1{

   font-size: medium;

   font-family: sans-serif, Helvetica, arial;

 }

.nome label{

    color: black;

    font-size: 15px;

    font-weight: lighter;

    font-family: Arial, Helvetica, sans-serif;

}


.nome input{

    background-color:#EEE;

    border-radius: 3px;

    width:250px;

    height:20px;
}

  
.sobrenome label{

    color: black;

    font-size: 15px;

    font-weight: lighter;

    font-family: Arial, Helvetica, sans-serif;
}


.sobrenome input{

    background-color:#EEE;

    border-radius: 3px;

    width:250px;

    height:20px;

}
#2

Boa noite, depende do objetivo, se o site vai ser responsivo ou não, mas penso que o que está abaixo ajuda, de uma olhada também no:

https://www.w3schools.com/w3css/default.asp

.nome{

            width: 210px;

            float: left;

            margin-left: 10px;

        }

        .sobrenome{

            width: 200px;

            float: left;

           

        }

        h1{

            font-size: medium;

       

            font-family: sans-serif, Helvetica, arial;

       

        }

       

        .nome label{

       

            color: black;

       

            font-size: 15px;

       

            font-weight: lighter;

       

            font-family: Arial, Helvetica, sans-serif;

       

        }

               

        .nome input{

       

            background-color:#EEE;

       

            border-radius: 3px;

       

            width:200px;

       

            height:20px;

        }

               

        .sobrenome label{

       

            color: black;

       

            font-size: 15px;

       

            font-weight: lighter;

       

            font-family: Arial, Helvetica, sans-serif;

        }

               

        .sobrenome input{

       

            background-color:#EEE;

       

            border-radius: 3px;

       

            width:200px;

       

            height:20px;

       

        }
1 curtida
#3

Recomendo usar flex (flexbox layout) para controlar isso. Veja um exemplo simples:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>

  <style>
    .container {
      width: 100%;
      display: flex;
    }

    div {
      width: 100%;
      height: 50px;
    }

    div#div1 {
      background-color: aqua;
    }

    div#div2 {
      background-color: black;
    }

    div#div3 {
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>
</body>

</html>

Repare na classe css container, a propriedade display: flex;.

Experimente adicionar na classe container a propriedade: flex-direction: column;, e repare como as divs mudam de posição.

Para aprender mais sobre flexbox, esse site é muito bacana: https://flexboxfroggy.com/

2 curtidas
#4

Daria pra fazer assim também:

<h1>Dados de Cadastro:</h1>

<div class="wrapper">
  <div class="nome">
    <label for="nome"><strong>Nome</strong></label><br>
    <input type="text" name="nome" id="name" required>
  </div>

  <div class="sobrenome">
    <label for="sobrenome"><strong>Sobrenome</strong></label><br>
    <input type="text" name="sobrenome" id="sobrenome" required>
  </div>
</div>

<style>
  .wrapper {
    display: flex;
    column-gap: 24px;
  }
</style>

No caso eu envolvi as 2 <div> com outra <div> e removi o <br>.

É basicamente o que o Lucas mostrou, mas fica aqui meu código só pra registro :sweat_smile:

2 curtidas
#5

Obrigada, gente! Deu super certo aqui colocar o “display:flex”. Sou iniciante em des. web e ainda não conhecia essa propriedade. :grin:

1 curtida