4

Tenho este HTML e gostaria que cada input fique em linhas separadas, neste caso abaixo que eu tivesse 3 linhas, uma para cada input.

*{
  margin: 0px;
  padding: 0px;
  background-color: #ccc;
  font-family: 'Arial';
  font-size: 16px;
  color: #1C1C1C;
  line-height: 1.5;
}

.log-adm{
  background-color: #000;
  text-align: center;
}

.log-adm-campos{
  width: 200px;
}
<form action="" method="post" name="loguin" class="log-adm">
<input type="text" name="usuario" placeholder="Usuário" required="required" class="log-adm-campos">
<input type="password" name="senha" placeholder="Senha" required="required" class="log-adm-campos">
<input type="submit">
</form>

5 Respostas 5

4

É assim que você quer? você pode usar o display: block, ou ate mesmo o float: left; (dependendo da situação), mas em geral só precisa da primeira opção.

Um elemento com valor block é chamado de elemento de nível de bloco ou apenas elemento de bloco. Um elemento com valor inline é sempre chamado de elemento de linha.

input{
  display: block;
  margin: 25px auto;
}
<form action="" method="post" name="loguin" class="log-adm">
<input type="text" name="usuario" placeholder="Usuário" required="required" class="log-adm-campos">
<input type="password" name="senha" placeholder="Senha" required="required" class="log-adm-campos">
<input type="submit">
</form>

7
  • Funcionou perfeitamente! Só que ficaram alinhados a esquerda, para centralizar eu faço o que? Não funcionou text-align: center/
    – Gladison
    Commented 27/10/2017 às 17:04
  • Vou editar a resposta @Gladison Commented 27/10/2017 às 17:05
  • Pronto, testa agora Commented 27/10/2017 às 17:06
  • continua o alinhamento a esquerda. Gostaria de centralizado também os inputs. Rsss
    – Gladison
    Commented 27/10/2017 às 17:08
  • Executa meu exemplo, ele esta no centro, agora preciso entender o porque o seu não está Commented 27/10/2017 às 17:09
2

Somente com CSS, mesmo código que o seu:

*{
  margin: 0px;
  padding: 0px;
  background-color: #ccc;
  font-family: 'Arial';
  font-size: 16px;
  color: #1C1C1C;
  line-height: 1.5;
}

.log-adm{
  background-color: #000;
  text-align: center;
  width: 100%;
}

.log-adm-campos{
  width: 200px;
  margin: 0 auto;
  display: block;
}
<form action="" method="post" name="loguin" class="log-adm">
<input type="text" name="usuario" placeholder="Usuário" required="required" class="log-adm-campos">
<input type="password" name="senha" placeholder="Senha" required="required" class="log-adm-campos">
<input type="submit" class="log-adm-campos">
</form>

0

Existem várias formas você pode fazer por CSS utilizando display

input {
  display: block;
}

Você pode divir os elementos em Div

.log-adm {
  text-align:center;
}
<form action="" method="post" name="loguin" class="log-adm">

<div>
  <input type="text" name="usuario" placeholder="Usuário" required="required" class="log-adm-campos">
</div>
<div>
  <input type="password" name="senha" placeholder="Senha" required="required" class="log-adm-campos">
</div>
<div>
  <input type="submit">
</div>

</form>

-1

<form action="" method="post" name="loguin" class="log-adm">
  <p><input type="text" name="usuario" placeholder="Usuário" required="required" class="log-adm-campos"></p>
  <p><input type="password" name="senha" placeholder="Senha" required="required" class="log-adm-campos"></p>
  <p><input type="submit"></p>
</form>

Depois disso só brincar com os padding.

-1

É só usar para quebrar a linha!

*{
  margin: 0px;
  padding: 0px;
  background-color: #ccc;
  font-family: 'Arial';
  font-size: 16px;
  color: #1C1C1C;
  line-height: 1.5;
}

.log-adm{
  background-color: #000;
  text-align: center;
}

.log-adm-campos{
  width: 200px;
}
<form action="" method="post" name="loguin" class="log-adm">
<input type="text" name="usuario" placeholder="Usuário" required="required" class="log-adm-campos"></br>
<input type="password" name="senha" placeholder="Senha" required="required" class="log-adm-campos"></br>
<input type="submit">
</form>

1
  • </br> não existe. O Correto é <br />.
    – Sam
    Commented 27/10/2017 às 19:04

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 .