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

Question

我想在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的文字比其他文字更长。

所有帮助将不胜感激。

Answer 1

添加以下CSS代码，您的问题将得到解决。

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

Answer 2

为label添加此CSS规则：

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

（否则标签将被视为行内元素。通过这种方式，您可以给它固定的宽度并将其对齐到顶部）

如果您不喜欢最上方的对齐方式，则可以在以下代码段中添加一个padding-top ike：

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

Answer 3

我不会为表单使用flexbox，而是为表单中的每个<div>使用flexbox。除文本区域外，每个输入字段的标签都垂直居中。标签在顶部垂直对齐。您可以根据需要在此处使用顶部填充。

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

Answer 4

我猜您将不得不手动执行此操作。通常，网站往往会在标签后面换行，并将输入字段移到下一行。