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.
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.
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):
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>