Question

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

另外，我是Web设计的新手，所以如果我没有用的代码，请解释。

谢谢。

#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

为什么有一个。在输入之前？另外，我强烈建议您不要使用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 2

我同意切尔的回答，因为您应该使用类似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，因此该代码段看起来有些奇怪，因此我必须进行一些无关的更改。

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。

CSS div不能正确水平对齐

4 个答案: