Alinhamento de label e input

[jerfeson 1]

Bom pessoal estou com uma duvida de tabeles, como faço para alinhar os inputs ao lado dos labels em uma posição padrão porque eles sempre ficam desajustados


EXEMPLO:
nome:|______|
Endereco:|____________|
telefone:|_________|

Quando na verdade o que queria era que ficassem assim :

nome: |____________|
Endereco: |____________|
telefone: |____________|


segue o código

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <form class="form-horizontal">
                    <fieldset>

                    <div class="controls">
                            <label class="control-label">Nome para certificado:</label>
                                <input/>
                    </div>

                    <div class="controls">
                        <label  class="control-label">CPF:</label>

                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Email:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Telefone:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Fax:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Profissão:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Instituição:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Cnpj:</label>
                            <input/>
                    </div>
                                    <!--ENDEREÇO-->
                    <div class="controls">
                        <label class="control-label"> Endereço</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">CEP:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Endereço:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Complemento:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Cidade:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Bairro:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">UF:</label>
                            <input/>
                    </div>
                    <!--PAGAMENTO-->
                    <div class="controls">
                        <label class="control-label">Categoria:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Número de Parcelas:</label>
                            <input/>
                    </div>

                    <div class="controls">
                        <label class="control-label">Nome para certificado:</label>
                            <input/>
                    </div>


                    <div class="controls">
                        <label class="control-label">Número de Acompanhantes:</label>
                            <input/>
                    </div>

                    </fieldset>
                </form>
            </div>
        </div>
    </div>

 

[diego.djss 0]

Primeiro crie uma div para encapsular os labels e inputs e depois coloque os input's dentro de outra DIV.

[jerfeson 1]

Primeiro crie uma div para encapsular os labels e inputs e depois coloque os input's dentro de outra DIV.

Exemplo :

 

 <div class="controls">
                        <label class="control-label">Email:</label>
                                 <div class="controls"> 
                            <input/>
                                  </div>
                    </div>

Tipo isso !! eu já tinha feito, mas desfiz !

[botasleve 1]

easy

Tabela resolve isso :)

Veja no meu site, acho que ta tudo alinhado, label com input.

 

http://muraio.url.ph/area/login.php

 

Mas veja que, se você não tomar cuidado com tabelas elas SUJAM o código, então use assim

<tr> <td> <label for="">Coluna1</label> </td> <td> <input /> </td> </tr>

 

Fica meio estranho assim mas, acredite na hora de fazer manutenção você vai bater o olho e achar o lugar.

Se tiver que usar algum espaceamento use um ID para a tabela e edite no CSS.

 

Não é nenhuma regra, mas são bons custumes de desenvolvedor :)

[jerfeson 1]

easy

Tabela resolve isso :)

Veja no meu site, acho que ta tudo alinhado, label com input.

 

http://muraio.url.ph/area/login.php

 

Mas veja que, se você não tomar cuidado com tabelas elas SUJAM o código, então use assim

<tr> <td> <label for="">Coluna1</label> </td> <td> <input /> </td> </tr>

 

Fica meio estranho assim mas, acredite na hora de fazer manutenção você vai bater o olho e achar o lugar.

Se tiver que usar algum espaceamento use um ID para a tabela e edite no CSS.

 

Não é nenhuma regra, mas são bons custumes de desenvolvedor :)

 

Poxa cara obrigado pela resposta, mas é que eu não estava querendo utilizar tabelas;

mas fui vencido, e tive que utilizar, com tabelas eu sei como é ... mesmo assim Obrigado pela respota