html - 如何垂直堆叠 CSS/HTML 中的不同元素？

Question

CSS 新手请多多包涵。我试图在 HTML/CSS 中垂直堆叠不同的元素，但无法让它们以自定义间距垂直堆叠。这是我目前所拥有的。

<p id="loginView">
        <input type="text" id="usernameField">
        <div></div>
        <input type="password" id="passwordField">
        <button id="loginButton">Login</button>
</p>


#loginView {
    text-align: center;
}

输出是水平查看的所有字段、用户名、密码和按钮。我试图让它们垂直堆叠并正确居中。

Here is what I currently have

Answer 1

1. 你不能输入 <div>在 p 里面标签。
2. 您可以只更改 #loginView 的所有子项至 display:block像这样:

#loginView {
  text-align: center;
}

#loginView>* {
  display: block;
}

<div id="loginView">
  <input type="text" id="usernameField" />
  <div></div>
  <input type="password" id="passwordField" />
  <button id="loginButton">Login</button>
</div>

附加:为了使东西居中并以一种深刻的方式对齐它，我建议使用 flexbox，它很简单并且可以用于很多不同的东西:

https://yoksel.github.io/flex-cheatsheet/