HTML / CSS两个看似相等的元素，位置不同

Question

我试图用HTML制作表单。我能解释的最好方法是展示我的代码。

HTML：

＆＃13;

＆＃13;

form div {
  position: relative;
  display: inline-block;
  height: 100px;
}
.inputContainer {
  display: inline-block;
}
.inputContainer input {
  display: block;
  width: 14em;
}
.inputTitle {
  display: inline-block;
  position: relative;
  bottom: 1.5em;
}

＆＃13;

<form>
  <div>
    <div class="inputTitle">[Name]</div>
    <div class="inputContainer">
      <input type="text" name="lastName"></input><sup>last</sup>
    </div>
    <div class="inputContainer">
      <input type="text" name="firstName"></input><sup>first</sup>
    </div>
    <div class="inputContainer">
      <input type="text" name="middleName"></input><sup>middle</sup>
    </div>
  </div>
  <div>
    <div>[SS#]</div>
    <div class="inputContainer">
      <input type="text" name="socialFirst"></input>
    </div>
    -
    <div class="inputContainer">
      <input type="text" name="socialMiddle"></input>
    </div>
    -
    <div class="inputContainer">
      <input type="text" name="socialLast"></input>
    </div>
  </div>

</form>

＆＃13;

＆＃13;

＆＃13;

在谷歌浏览器中： 有人可以解释为什么左上角的元素不会从同一个y位置开始，因为高度属性朝向页面底部增加，而不是顶部？

Answer 1

因为内联元素的默认垂直对齐方式是基线，这是您所看到的。尝试将其更改为顶部：

form > div { vertical-align:top}

Answer 2

vertical align元素的默认inline-block为baseline。将vertical-align更改为top。

form div {
  position: relative;
  display: inline-block;
  height: 100px;
  vertical-align: top;
}

Answer 3

除了使用vertical-align之外，您还可以使用flexbox。默认情况下，它会为您对齐项目，但您可以使用align-items以不同方式对齐它们。

form {
  display: flex;
}
@media (max-width: 1200px) {
  form {
    flex-direction: column;
  }
}
form div {
  position: relative;
  display: inline-block;
  height: 100px;
}
.inputContainer {
  display: inline-block;
}
.inputContainer input {
  display: block;
  width: 14em;
}
.inputTitle {
  display: inline-block;
  position: relative;
  bottom: 1.5em;
}

<form>
  <div>
    <div class="inputTitle">[Name]</div>
    <div class="inputContainer">
      <input type="text" name="lastName"></input><sup>last</sup>
    </div>
    <div class="inputContainer">
      <input type="text" name="firstName"></input><sup>first</sup>
    </div>
    <div class="inputContainer">
      <input type="text" name="middleName"></input><sup>middle</sup>
    </div>
  </div>
  <div>
    <div>[SS#]</div>
    <div class="inputContainer">
      <input type="text" name="socialFirst"></input>
    </div>
    -
    <div class="inputContainer">
      <input type="text" name="socialMiddle"></input>
    </div>
    -
    <div class="inputContainer">
      <input type="text" name="socialLast"></input>
    </div>
  </div>

</form>