html - CSS div 水平对齐不正确

Question

<分区>

Answer 1

我同意 Chere 的回答，因为你应该使用类似 CSS Grid 的东西或 Flexbox .但是，如果您想在此示例中保持简单，或者只是想知道为什么您的代码无法正常工作，这里有一个解决方案:

#redcontact {
  margin-bottom: 0;
  padding-left: 5vh;
  font-size: 15px;
  line-height: 30px;
  background: black;
}

.contacthor {
  display: inline-block;
}

form>.contacthor>.input {
  color: #C5B358;
  font-size: 15px;
  background-color: black;
  margin-top: 0;
  margin-left: 1vh;
  margin-bottom: 1vh;
  height: 30px;
  width: 190px;
  display: block;
}

.contacthor>textarea {
  color: #C5B358;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  width: 60vh;
  height: 25vh;
  background: black;
  border: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: grey;
  padding-left: 4px;
  margin-top: 0;
  margin-bottom: 1vh;
  margin-left: 1vh;
}

.contacthor>p {
  margin-bottom: 5px;
  margin-top: 0;
  margin-bottom: 1vh;
  margin-left: 1vh;
}

.contacthor>input[value=enviar] {
  display: block;
  margin-top: 0;
  margin-bottom: 1vh;
  margin-left: 1vh;
}

/* ===== Styles to fix example ===== */

label, p {
  color: white;
}

/* ===== Styles to answer your question ===== */

.contacthor {
  vertical-align: top;
}

<div id="redcontact">
  <form action="action_page.php">
    <div class="contacthor">
      <label for="name">Nombre</label>
      <input class="input" type="text" name="name_user" placeholder="test">
      <label for="org">Empresa</label>
      <input class="input" type="text" name="org" placeholder="test">
      <label for="mail">Mail</label>
      <input class="input" type="text" name="mail" placeholder="contacto@test.com">
    </div>
    <div class="contacthor">
      <p>Mensaje</p>
      <textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
      <input type="submit" value="enviar">
    </div>
  </form>
</div>

要摆脱这一点的主要事情是添加 vertical-align: top。 Here是一个类似的问题和here是 vertical-align 属性的文档。

注意:我认为可能缺少一些 CSS，因此该代码段看起来有点奇怪，我不得不进行一些不相关的更改。