How to make each input stand on a line separately?

Navigation
4

I have this HTML and I would like every input to be on separate lines, in this case below that I had 3 rows, one for each 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>
    
asked by anonymous 27.10.2017 / 18:57

5 answers

3
Is this how you want it? you can use display: block , or even float: left; (depending on the situation), but usually you only need the first option.

An element with block value is called a block-level element or only a block element. An element with value inline is always called a line element. 

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>
    
27.10.2017 / 19:00
2

Only with CSS, same code as yours: 

*{
  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>
    
27.10.2017 / 19:13
0

There are several ways you can do CSS by using display 

input {
  display: block;
}

You can split the elements in 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>
    
27.10.2017 / 19:02
-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>

After that, just play with padding .

    
27.10.2017 / 19:00
-1

Just use it to break the line! 

*{
  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>
    
27.10.2017 / 19:04
UPDATE PHP with JavaScript What is Chainability?