2

Minha situação: Tenho um form em que os campos estão dispostos na vertical, e com o label alinhado à direita e do lado esquerdo, como mostra a imagem abaixo:

meuform

Desejo deixar pelo menos 2 campos por linha para fazer outros testes, e há espaço na página para fazer isso. Fiz as seguintes alterações:

Colocar display: inline-block, display: inline, float: left um de cada vez, nas divs que contém o label e o input (divXXX). Em todos os casos, não obtive sucesso, o label é o mais difícil para se adequar. Não domino CSS, foram apenas sugestões que encontrei em pesquisas. Alguma outra solução?

Observações: Estou usando MetroUI CSS. Não é aconselhável usar <table> no meu caso, devido a algumas restrições da empresa.

HTML

 <div class="conteudoConvenio">
    <div style="width: 100% !important;">
        <fieldset>
                <legend>Formulário</legend>
               <div id="divCPF">
                <label for="txtCPF">CPF:</label>
                <div class="input-control text size4">
                    <input class="text" type="text" name="txtCPF" id="txtCPF" autofocus data-rule-cpf="true" data-rule-required="true" data-inputmask="'mask' : '999.999.999-99'" />
                </div>
            </div>
            <div id="divCNPJ">
                <label for="txtCNPJ">
                    CNPJ:
                </label>
                <div class="input-control text size4">

                    <input class="text" type="text" name="txtCNPJ" id="txtCNPJ" autofocus data-rule-cnpj="true" data-rule-required="true" data-inputmask="'mask' : '99.999.999/9999-99'" />
                </div>
            </div>

           <div class="input-control">
                <input type="submit" class="btn btn-default" value="Enviar" id="btnEnviar" />
            </div>
        </fieldset>
    </div>
</div>

CSS

body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}

div[class^=input-control], #btnEnviar{
margin: 7px;
}

.divTotal{
width: 30%;
float: left;
}  

label[for^=txt] {
text-align: right;
float: left;
width: 10%;
display: inline-block !important;
}

.help-block{
white-space:nowrap;
color: #e51400;
}

.conteudoConvenio {
/*width: 620px !important;
overflow-y:scroll;
overflow-x:hidden;
max-height: 80% !important;*/
width:80% !important;
position: relative;
left: 210px;
bottom: 90px;
}

EDIT: Com a resposta do Felipe Stoker, consegui deixar as divs na mesma linha, mas o label tornou a ficar em cima como mostra a imagem abaixo. Tentei alterar o width dos campos mas não obtive progresso.

error2

2
  • Talvez seja mais fácil fazer o que você quer usando tabelas: as divCPF viram trs, o label vai num td e o input no outro.
    – hugomg
    Commented 12/08/2014 às 15:31
  • Olá @hugomg, obrigado pela resposta, porém não é algo aconselhável no meu caso devido à restrições e costumes da empresa. Inseri esta observação na questão. Commented 12/08/2014 às 15:40

2 Respostas 2

3

Deixa eu ver se entendi bem. Você pode fazer o seguinte. Criar uma div que ira contar a quantidade de campos que você quiser e definir uma largura máxima para ela, tipo:

Dentro dessa div, eu criaria mais duas divs filhas, colocaria a mesma largura para elas, colocaria float:left, assim ela iria jogar para o lado. Pronto, dentro das divs filhas você pode colocar o input e label, só tem que cuidar do width de cada elemento.

Exemplo:

 <div class="campoTotal">
    <div class="filho">
        <label></label>
        <input></input>
    </div>
    <div class="filho">
        <label></label>
        <input></input>
    </div>
</div>
6
  • Olá @FelipeStoker. Obrigado pela resposta, só resta acertar a questão do label, editei minha questão. Se puder ajudar, agradeço Commented 12/08/2014 às 17:54
  • Opa. Cara, não tem seu CSS inteiro ali. Veja se tem float:left na div que tem o input, se houver, pode ser questão de largura, tanto na div quanto no input Commented 12/08/2014 às 18:26
  • Olá @FelipeStoker. Adicionei o resto do CSS que faltava. Na div que tem o input estou aplicando a regra div[class^=input-control], #btnEnviar { margin: 7px; }. Estou usando `float: left;" apenas em outras regras. Desculpe, não domino o assunto, mas se puder me indicar se há algo errado no código que atualizei, agradeço. Commented 12/08/2014 às 18:48
  • Consegui resolver o problema, apenas dediquei um tempo para entender corretamente a sua resposta e cheguei onde queria, obrigado! Commented 13/08/2014 às 13:31
  • Não consegui ler sua resposta a tempo. Mas, que bom que conseguiu. A ideia é sempre criar uma div principal e mexer no width para que elas fiquem lado a lado, e nunca esquecer o float:left. Commented 13/08/2014 às 14:02
2

Olá, segue minha proposta para fazer isso:

HTML

<form>
    <div class="content">
        <div class="blc">
           <label>Input Label
             <input type="text" placeholder="" />
           </label>
        </div>
        <div class="blc">
           <label>Input Label
             <input type="text" placeholder="" />
           </label>
        </div>
        <div class="blc">
           <label>Input Label
             <input type="text" placeholder="" />
           </label>
        </div>
    </div>
</form>

CSS

form .content { width:100%; }
form .content .blc { position:relative;float:left;width:33.33333%; }
label { display:block; }
input[type="text"] { display:block; }

Aqui pode ser visualizado e alterado online: http://jsfiddle.net/8dxab5oh/

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 .