1

Boa noite,

Utilizei 'float: right;' para colocar alguns campos de um formulário lado a lado, mas eles descem um campo abaixo. 'Nome Completo' e 'Data de Nascimento' deveriam ficar lado a lado, mas o campo de data desce.

Imagem:

Códigos:
Página de cadastro https://gist.github.com/Silence00/68bd08fb9f3a0feaab3f
CSS https://gist.github.com/Silence00/1851cbc6d66fc308b784

Como resolver?

2 Respostas 2

0

Não aconselharia utilizar esta forma para alinhar os campos no formulário, creio que a forma mais coerentes, seria cada div que contenha uma label e um input, tenha 50% e float left... desta forma não perderia a configuração quando mudasse o tamanho da tela. Mas se deseja manter este formato o ideal seria você declarar a div que vai a direita antes da que vai na esquerda dentro do seu html, ou então fazer o mesmo que fez na da direita, para a esquerda, declarando-as como float left. O idea seria tambem que evitasse utilizar o mesmo id para mais de um objeto, já que por convenção o id é único. Poderia até usar assim class="rg direita", que não haveria problemas.

        <!DOCTYPE html>
        <html>
        <head>
           <meta charset="UTF-8"/>
           <title>Cadastro</title>
        <style>
        body {
            border-top: 50px solid #45543D;
            margin: 0;
           text-align: center;
        }

        h1, h2, h3, h4 {
            font-weight: inherit;
            color: #363636;
        }

        hr {
            border: 0;
            border-top: 1px solid #ddd;
        }

        #corpo {
            margin: 50px 150px;
        }

        #formulario {
            text-align: left;
            margin: 0 0px;
        }

        #formulario .direita {
            float: right;
            width:50%;

        }

        #formulario .esquerda {
            float: left;
            width:50%;

        }

        #formulario label {
            line-height: 30px;
            text-align:left;
            color:#363636;
        }

        #formulario input {
            padding: 9px;
            border: 1px solid #CCCCCC;
            background: #E8EFE4;
            border-radius: 4px;
            color:#363636;
        }

        #formulario select {
            padding: 9px;
            border: 1px solid #CCCCCC;
            background: #E8EFE4;
            border-radius: 4px;
            color:#363636;
        }

        #formulario .botao {
            cursor: pointer;
            text-align: left;
            margin: 0 0 0 0;
            color: #FFF;
            background-color: #45543D;
        }

        #formulario .botao:hover {
            background-color: #354030;
        }

        #copy {
            color: #363636;
            text-align: center;
            margin: 50px 150px;
        }
        </style>
        </head>
        <body>
        <!-- Corpo -->
        <div id="corpo">
           <!-- Formulário -->
           <div id="formulario">
              <form action="insere.php" method="post"> 
          <div class="data direita" id="">
                    <label for="data_de_nascimento">Data de Nascimento:</label><br>
                    <input type="text" size="25" placeholder="__/__/____">
                 </div>

                 <div class="esquerda" id="">
                    <label for="nome">Nome Completo:</label><br>
                    <input type="text" size="35" placeholder="Nome Completo">
                 </div>
                    <div class="rg esquerda" id="">
                    <label for="rg">RG:</label><br>
                    <input type="text" placeholder="00.000.000-0">
                 </div>
                 <div class="cpf direita" id="">
                    <label for="cpf">CPF:</label><br>
                    <input type="text" size="25" placeholder="000.000.000-0">
                 </div>
                 <div class="esquerda" id="">
                    <label for="filiacao_pai">Pai:</label><br>
                    <input type="text" size="30" placeholder="Nome do Pai">
                 </div>
                 <div class="direita" id="">
                    <label for="filiacao_mae">Mãe:</label><br>
                    <input type="text" size="25" placeholder="Nome da Mãe">
                 </div>
                 <div class="esquerda" id="">
                    <label for="escolaridade">Escolaridade:</label><br>
                    <select name="escolaridade" id="">
                       <option value="Selecione">Selecione</option>
                    </select>
                 </div>
                  <div class="direita" id="">
                    <label for="profissao">Profissão:</label><br>
                    <input type="text" size="25" placeholder="Profissão">
                 </div>
                 <div class="telefone esquerda" id="">
                    <label for="telefone">Telefone:</label><br>
                    <input type="text" placeholder="0000-0000">
                 </div>
                 <div class="celular direita" id="">
                    <label for="celular">Ceular:</label><br>
                    <input type="text" size="25" placeholder="(00) 0000-0000">
                 </div>  
                 <div class="esquerda" id="">
                    <label for="email">E-mail:</label><br>
                    <input type="text" size="35" placeholder="[email protected]">
                 </div>
                 <br>
                 <input type="submit" value="Cadastrar" class="botao">
                 <input type="reset" value="Limpar Campos" class="botao">
              </form>
           </div>
           <!-- /Formulário -->
        </div>
        <!-- /Corpo -->
        </body>
        </html>
3
  • eu tentei adicionando um float esquerdo também, e ficou alinhado, porém no preenchimento quando você aperta TAB pra ir ao próximo campo é bagunçado, sai pulando os campos.. kkk Mas de qualquer forma vou manter abaixo mesmo, não são muitos campos.. Obrigado pela ajuda!! Commented 24/05/2015 às 3:57
  • se colocar como no modelo que te passei, pode fazer a ordem esquerda depois direita, sem problemas, mas isso ainda vai dar problema quando a tela for diminuida... dae compensa por tudo como float left, para que todos se alinhem corretamente Commented 24/05/2015 às 13:18
  • E fiz um teste aqui e de fato, virou uma bagunça em outro tamanho de tela. Vlw pela dica! Commented 24/05/2015 às 16:55
-3

Cadastro body { border-top: 50px solid #45543D;
margin: 0; text-align: center; }

    h1, h2, h3, h4 {
        font-weight: inherit;
        color: #363636;
    }

    hr {
        border: 0;
        border-top: 1px solid #ddd;
    }

    #corpo {
        margin: 50px 150px;

    }

    #formulario{
        text-align: left;
        margin:auto;
        display: flex;
        flex-direction: column;
        flex: 1;
        max-width: 600px;

    }

    #formulario .flex_direita {
        display: flex;
        float: right;
        flex-direction: column;
        flex: 1;
    }

    #formulario .flex_esquerda {
     display: flex;
     flex-direction: column;
     flex: 1;
    }

    #formulario label {
        line-height: 30px;
        text-align:left;
        color:#363636;
    }

    #formulario input {
        padding: 9px;
        border: 1px solid #CCCCCC;
        background: #E8EFE4;
        border-radius: 4px;
        color:#363636;
    }

    #formulario select {
        padding: 9px;
        border: 1px solid #CCCCCC;
        background: #E8EFE4;
        border-radius: 4px;
        color:#363636;
    }

    #formulario .botao {
        cursor: pointer;
        text-align: left;
        margin: 0 0 0 0;
        color: #FFF;
        background-color: #45543D;
    }

    #formulario .botao:hover {
        background-color: #354030;
    }

    #copy {
        color: #363636;
        text-align: center;
        margin: 50px 150px;
    }      
    </style>
    </head>
    <body>
     <!-- /Corpo -->
    <div id="corpo">
       <!-- Formulário -->
       <div id="formulario">
    <form action="insere.php" method="post">
      <div class="flex_direita">
      <div class="data direita" id="">
                <label for="data_de_nascimento">Data de Nascimento:</label><br>
                <input type="text" size="25" placeholder="__/__/____">
             </div>

             <div class="cpf direita" id="">
                <label for="cpf">CPF:</label><br>
                <input type="text" size="25" placeholder="000.000.000-0">
             </div>

            <div class="direita" id="">
                <label for="filiacao_mae">Mãe:</label><br>
                <input type="text" size="25" placeholder="Nome da Mãe">
             </div>

            <div class="direita" id="">
                <label for="profissao">Profissão:</label><br>
                <input type="text" size="25" placeholder="Profissão">
             </div>

            <div class="celular direita" id="">
                <label for="celular">Ceular:</label><br>
                <input type="text" size="25" placeholder="(00) 0000-0000">
             </div> 
     </div>

     <div class="flex_esquerda">
             <div class="esquerda" id="">
                <label for="nome">Nome Completo:</label><br>
                <input type="text" size="35" placeholder="Nome Completo">
             </div>
                <div class="rg esquerda" id="">
                <label for="rg">RG:</label><br>
                <input type="text" placeholder="00.000.000-0">
             </div>

             <div class="esquerda" id="">
                <label for="filiacao_pai">Pai:</label><br>
                <input type="text" size="30" placeholder="Nome do Pai">
             </div>

             <div class="esquerda" id="">
                <label for="escolaridade">Escolaridade:</label><br>
                <select name="escolaridade" id="">
                   <option value="Selecione">Selecione</option>
                </select>
             </div>

             <div class="telefone esquerda" id="">
                <label for="telefone">Telefone:</label><br>
                <input type="text" placeholder="0000-0000">
             </div>

             <div class="esquerda" id="">
                <label for="email">E-mail:</label><br>
                <input type="text" size="35" placeholder="[email protected]">
             </div>
     </div>
             <br>
             <input type="submit" value="Cadastrar" class="botao">
             <input type="reset" value="Limpar Campos" class="botao">
    </form>
   </div>
       <!-- /Formulário -->
</div>
    <!-- /Corpo -->
    </body>
    </html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .