css - 表格，水平对齐姓名和电子邮件

Question

我想水平对齐两个输入，每个标签都在顶部。例如:

<form class="contact_form" action="" method="post" name="contact_form">
  <label for="name">Name</label>
  <input type="text" name="name" required>

  <label for="email">Email</label>
  <input type="email" name="email" required>

  <label for="message">Message</label> 
  <textarea name="message" id="" cols="30" rows="10"></textarea>

  <button class="submit" type="submit">Send</button>
</form>

我想得到:

Name                     Email
name's input             email's input

我已经尝试了一段时间，但我不知道如何实现。 非常感谢!

Answer 1

您有多种选择，但正如 Ben 所说，它们涉及添加标记——将每个输入和标签对包装在包含的 div 中。

选项#1:

form {
    display: table;
}
div {    // containing div for your input/label pairs
    display: table-cell;
}

选项#2:

form {
    display: flex;
    flex-direction: row;
    align-items: center;    // this will center them vertically
}
div {    // containing div for your input/label pairs
    flex: 1;    // this ensures your divs are the same size horinzontally
}