如何在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/

Answer 2

尝试使用dispaly: flex;使您的项目垂直对齐。另外，我建议你使用css而不是id来引用你的css样式。这是一个示例代码。希望能对你有所帮助

HTML

<div class="d-flex flex-column align-items-start justify-content-center">
  <input class="m-2" type="text" id="usernameField" />
  <input class="m-2" type="password" id="passwordField" />
  <button class="m-2" id="loginButton">Login</button>
</div>

CSS

.d-flex {
  display: flex;
}

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

.align-items-start {
  align-items: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.m-2 {
  margin: 0.5rem;
}

JS文件链接：https://jsfiddle.net/SJ_KIllshot/dwkxo1va/

Answer 3

您应该使用语义HTML

​

.formWrapper {max-width: 400px; margin:0 auto;}
.text-center {
  text-align: center;
}

input {width: 100%;margin-bottom: 10px;}

<form class="formWrapper">
  <div class="form-group">
    <input type="text" id="usernameField">
  </div>
  <div class="form-group">
    <input type="password" id="passwordField">
  </div>
  <div class="form-group text-center">
    <button id="loginButton">Login</button>
  </div>
</form>

​