将输入和文本区域与标签垂直对齐答案

【问题标题】：Align inputs and textarea with labels vertically even将输入和文本区域与标签垂直对齐
【发布时间】：2018-10-27 12:50:57
【问题描述】：

我想用css创建这个表单

HTML

<div class="contact__right">
  <form action="" class="contact__form">
    <div>
      <label for="name" class="contact__form-label">Name</label>
      <input type="text" id="name" class="contact__form-input">
    </div>
    <div>
      <label for="email" class="contact__form-label">Email</label>
      <input type="text" id="email" class="contact__form-input">
    </div>
    <div>
      <label for="phone" class="contact__form-label">Phone</label>
      <input type="text" id="phone" class="contact__form-input">
    </div>
    <div>
      <label for="message" class="contact__form-label">Message</label>
      <textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
    </div>
  </form>
</div>

CSS

.contact {
  &__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 105px 95px;
    color: $white;
  }
  &__form-input,
  &__form-textarea {
    width: 300px;
    height: 40px;
    background: transparent;
    border: 1px solid white;
    border-radius: 2px;
    margin-bottom: 25px;
  }
  &__form-textarea {
    height: 150px;
  }
  &__form-label {
    padding-right: 70px;
  }
}

我正在努力将输入与标签和textarea 垂直对齐在同一行。 textarea 总是突出在旁边，因为它的 label 的文字比其他的要长。

我们将不胜感激。

【问题讨论】：

请分享已编译的 CSS（而不是预编译的 SASS）：更好的是，在您的问题本身中创建一个 MCVE，以便我们可以看到您遇到了什么问题。

标签： html css

【解决方案1】：

我不会为表单使用弹性框，而是为表单内的每个<div> 使用。除文本区域外，每个输入字段的标签都垂直居中。在那里，标签在顶部垂直对齐。您可以在需要时使用顶部填充。

* {
  box-sizing: border-box;
}

.contact__right {
  background-color: gray;
}

.contact__form {
  padding: 105px 95px;
  width: 100%;
  color: white;
}

.contact__form>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.contact__form-input,
.contact__form-textarea {
  width: 300px;
  height: 40px;
  background: transparent;
  border: 1px solid white;
  border-radius: 2px;
}

.contact__form-textarea {
  height: 150px;
}

label[for="message"].contact__form-label {
  align-self: flex-start;
}

<div class="contact__right">
  <form action="" class="contact__form">
    <div>
      <label for="name" class="contact__form-label">Name</label>
      <input type="text" id="name" class="contact__form-input">
    </div>
    <div>
      <label for="email" class="contact__form-label">Email</label>
      <input type="text" id="email" class="contact__form-input">
    </div>
    <div>
      <label for="phone" class="contact__form-label">Phone</label>
      <input type="text" id="phone" class="contact__form-input">
    </div>
    <div>
      <label for="message" class="contact__form-label">Message</label>
      <textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
    </div>
  </form>
</div>

【讨论】：

【解决方案2】：

添加下面的css代码，你的问题就解决了。

.contact__form-label {
vertical-align: top;}

【讨论】：

【解决方案3】：

为label添加这个CSS规则：

label {
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

（否则标签将被视为内联元素。这样你给它一个固定的宽度并将它与顶部对齐）

如果不喜欢最顶部的对齐方式，可以在下面的 sn-p 中添加padding-topike：

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 105px 95px;
  color: $white;
}

input,
textarea {
  width: 300px;
  height: 40px;
  background: transparent;
  border: 1px solid white;
  border-radius: 2px;
  margin-bottom: 25px;
}

textarea {
  height: 150px;
}

label {
  width: 100px;
  display: inline-block;
  vertical-align: top;
  padding-top: 14px;
}
.contact__right {
background: #ccc;
}

<div class="contact__right">
  <form action="" class="contact__form">
    <div>
      <label for="name" class="contact__form-label">Name</label>
      <input type="text" id="name" class="contact__form-input">
    </div>
    <div>
      <label for="email" class="contact__form-label">Email</label>
      <input type="text" id="email" class="contact__form-input">
    </div>
    <div>
      <label for="phone" class="contact__form-label">Phone</label>
      <input type="text" id="phone" class="contact__form-input">
    </div>
    <div>
      <label for="message" class="contact__form-label">Message</label>
      <textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
    </div>
  </form>
</div>
´

【讨论】：

【解决方案4】：

我猜你将不得不手动执行此操作。通常网站倾向于在标签后换行并将输入字段带到下一行。

【讨论】：