How to make each input stay on a separate line?

Question

I have this HTML and would like each input stay in separate lines, in this case below I had 3 lines, 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>

Answer 1

Is that how you want it? you can use the display: block, or even the float: left; (depending on the situation), but in general only needs the first option.

An element with value block 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>

Answer 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>

Answer 3

There are several ways you can do by using CSS display

input {
  display: block;
}

You can entertain 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>

Answer 4

<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 the padding.

Answer 5

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>