How to place elements beneath

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>

Does this answer your question? [How can I position one element below another?](https://stackoverflow.com/questions/40676648/how-can-i-position-one-element-below-another) — Rojo, Feb 06 '21 at 14:37

score 1 · Answer 1 · answered Feb 06 '21 at 14:37

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>

Aalexander · Accepted Answer · 2021-02-06T15:02:20.720

1

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>

edited Feb 06 '21 at 15:02

answered Feb 06 '21 at 14:37

Aalexander

4,987
3
11
34

now the lower line of the input box and the upper line of the ohter input box are over each other... padding does only change the spache inside the box how can I fix this? – Tknoobs Feb 06 '21 at 15:00
1

You can set a margin for your input fields. I have updated my answer – Aalexander Feb 06 '21 at 15:02
Thanks! I have the elements in a div now and want to center them, but just the text inside it got centered – Tknoobs Feb 06 '21 at 15:50

How to place elements beneath

2 Answers2