如何在下面放置元素

Question

I am trying to make a little website and have two inputs. The problem: One is on the right of the other, but I want to have it beneath. This is a very simple question, though I did not find a good answer.

 <form> <h2>Login</h2> <input type="text" placeholder="Username" id="username"> <input left="40px" type="text" placeholder="Password" id="password"> <input type="submit" value="Login now"> </form>

Answer 1

Try to add some css class, playing with flex :

.myForm {
  display: flex;
  flex-direction: column;
}

<form class="myForm">
    <h2>Login</h2>
    <input type="text" placeholder="Username" id="username">
    <input left="40px" type="text" placeholder="Password" id="password">
    <input type="submit" value="Login now">
</form>

Answer 2

You can make them display as block to have them beneath each other just add

input {
    display: block;
}

to your css file

 input { display: block; margin: 5px; }

 <form> <h2>Login</h2> <input type="text" placeholder="Username" id="username"> <input left="40px" type="text" placeholder="Password" id="password"> <input type="submit" value="Login now"> </form>