2

Como faço para alinhar esses dois input?

Já estou tentando há mais de 2 dias e não consigo fazer eles se alinharem corretamente.

As inputs

1
  • Nickolas, se alinhar em relação a que? Poderia colocar aqui o código que você já fez, mesmo estando errado poderemos corrigir.
    – Paulo
    Commented 11/04/2015 às 3:52

2 Respostas 2

3

Para este caso existe algumas soluções. O que posso te aconselhar a fazer, é colocar o label e o input em divs diferentes e controlar o tamanho deles através destas divs.

Desta forma, todos os label terão o mesmo tamanho, forçando o alinhamento dos inputs. Neste caso será importante alinhar os label a direita.

body {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
}

#container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 360px;
    height: 120px;
    margin: auto;
    box-shadow: 0px 0px 10px black;
    padding: 20px;
    box-sizing: border-box;
}

.row {
  clear: both;
}

.column-3 {    
    width: 25%;    
}

.column-9 {    
    width: 75%;    
}

.label {
    padding-top: 7px;
    text-align: right;    
}

.label:after {
    content: ':';
    padding-right: 5px;
}

.column {
    float: left;
    height: 41px;    
}

.input input {
    width: 100%;
    height: 34px;    
    padding-left: 5px;
    box-sizing: border-box;
}
<div id="container">
    <div class="row">
        <div class="column-3 column label">
            <label for="txtLogon">Logon</label>
        </div>
        <div class="column-9 column input">
            <input type="text" id="txtLogon" />
        </div>
    </div>
    <div class="row">
        <div class="column-3 column label">
            <label for="txtPassword">Senha</label>
        </div>
        <div class="column-9 column input">
            <input type="password" id="txtPassword" />
        </div>
    </div>
</div>

Em todo caso, é interessante que atualize a sua pergunta com o que você já fez, assim fica mais facil complementar o seu código.

por fim, aconselho a leitura do seguinte artigo (no exemplo acima eu utilizei o alinhamento a direita):

Label Placement on Forms

3

Tudo depende da tua markup atual, mas recorrendo apenas a CSS, sem introdução de novos elementos na markup para além dos requeridos, conseguimos resolver a questão:

form,
label {
  display: block;
  padding: 10px;
}
form {
  width: 270px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}
label {
  color: #FFF;
  text-align: right;
}
input {
  display: inline-block;
  padding-left: 10px;
}
<form>
  <label for="username">
    Login:
    <input type="text" value="" id="username" name="username" />
  </label>
  <label for="username">
    Senha:
    <input type="text" value="" id="username" name="username" />
  </label>
</form>

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 .