表格，水平对齐姓名和电子邮件答案

【问题标题】：form, align horizontally name and email表格，水平对齐姓名和电子邮件
【发布时间】：2015-11-23 18:12:53
【问题描述】：

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

<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

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

【问题讨论】：

你有 CSS 样式吗？如果是这样，请将其添加到您的问题中。

标签： css html forms contact-form

【解决方案1】：

我同意为此使用 flexbox。

.flexform {
  display: flex;
  flex-wrap: wrap;
  background: #ccc;
  width: 50%;
  padding: 20px;
}

label, textarea, input {
  box-sizing: border-box;
  width: 100%;
}

label {
  display: block;
  padding: 10px 0px;
}

.topleft, .topright {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
}

.message {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}

.submit {
  width: 100%;
  margin: 10px;
  padding: 10px;
}

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

  <div class="topright">
    <label for="email">Email</label>
    <input type="email" name="email" required>
  </div>
  
  <div class="message">
    <label for="message">Message</label> 
    <textarea name="message" id="" cols="30" rows="10"></textarea>
  </div>
  
  <button class="submit" type="submit">Send</button>
  
</form>

【讨论】：

是的，没问题。你会想要为 flexbox 的东西添加前缀，但你应该很高兴。
display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
那是display: flex; flex-wrap: wrap;

【解决方案2】：

您有很多选择，但就像 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
}

【讨论】：

【解决方案3】：

您应该使用表格（坏方法）或使用换行符和内联块的 CSS。

试试这个： JSFiddle Example

.block {
    display: inline-block;
}

【讨论】：

【解决方案4】：

尝试将每个输入字段（<input> 和 <label> 对）包装在包含 <div> 的元素中，并在 div 上使用它：

display: inline-block;

使用边距和内边距值，让每个外观都如您所愿。

【讨论】：