CSS div未正确水平对齐[重复]

Question

这可能是一个愚蠢的问题，但一整天都让我发疯。我需要 contacthor 类的两个 div 在顶部对齐，但不要通过使用 margin-top: -x 或等来强制它们。Here is an image of the issue.

另外，我是网页设计新手，所以如果我有无用的代码，请解释一下。

谢谢。

#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;
}

<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>

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，所以 sn-p 看起来有点奇怪，我不得不进行一些不相关的更改。

Answer 2

为什么会有 .在输入之前？ 另外，我强烈建议不要使用 vh 或像素。你应该和他们一起去。如果不做任何事情，您可能应该尝试使用 flexbox 做类似的事情。

#redcontact {
  width: 100%;
  height: 100%;
  font-size: 15px;
  line-height: 1.5;
  background-color: #000;
  color: #fff;
 }

form {
  display: flex;
  padding: 2em;

  .contacthor {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0 2em;

    input,
    textarea {
      color: #C5B358;
      background-color: transparent;
      margin-left: 1em;
      margin-bottom: 1em;
      padding: 0.5em 1em;
      width: auto;
      display:block;
    }

    input {
      border: 0;
    }

    textarea {
      border: 1px solid grey;
      border-radius: 3px;
    }
  }
}

Answer 3

我已经做了一个网格。看看你是否正在寻找类似的东西。 https://codepen.io/kalpeshshende/pen/qJjomO

form{
  display:grid;grid-gap:10px;
  grid-template-columns:1fr 2fr;
}
.holder{
    max-width:600px;
    margin:auto;
    background:black;
    color:#C5B358;padding:10px;
}
.contacthor{
  display:grid;grid-gap:10px;
}
textarea{
  height:100px;
}
input[type=submit]{
  width:120px;

}
p{
  padding:0px;
}
input[type=text]{
  background:black;
  color:;border:none;
}

标记：

<body>
    <div class="holder">
    <form action="">
       <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">
          <label for="Mensaje">Mensaje</label>
          <textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
          <input type="submit" value="enviar">
      </div>
    </form>
  </div>
</body>

Answer 4

尝试将vertical-align: top; 添加到contracthor。