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

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

最佳答案

您不能将<div>放在p标记内。
您可以像这样将#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/

关于html - 如何在CSS/HTML中垂直堆叠不同的元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56518804/