Css 表单，水平对齐名称和电子邮件

我想将两个输入与顶部的每个标签水平对齐。例如：

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

我已经尝试了一段时间，但我不知道如何做到这一点。

---

多谢各位

尝试将每个输入字段（

和

对）包装在包含

元素中，并在div上使用此选项：

display: inline-block;

使用边距和填充值，使每种外观都符合您的要求

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

试试这个：

---

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

选项1：

选项2：

---

我同意用flexbox来做这个

.flexform{
显示器：flex；
柔性包装：包装；
背景：#ccc；
宽度：50%；
填充：20px；
}
标签、文本区域、输入{
框大小：边框框；
宽度：100%；
}
标签{
显示：块；
填充：10px 0px；
}
.左上角，.右上角{
框大小：边框框；
宽度：50%；
填充：10px；
}
.留言{
框大小：边框框；
宽度：100%；
填充：10px；
}
.提交{
宽度：100%；
利润率：10px；
填充：10px；
}

名称
电子邮件
消息
发送

您有CSS样式吗？如果是的话，把它加到你的问题上。是的，没问题。你会想在flexbox的东西前面加前缀，但你应该准备好了。

display:-webkit-box；显示器：-moz盒；显示：框；显示：-webkit flex；显示：-moz flex；显示：-ms flexbox；显示器：flex-webkit盒行：多个-moz盒行：多个；箱线：多条-webkit柔性包装：包装-moz-flex-wrap:wrap-ms-flex-wrap:wrap；flex-wrap:wrap；}用于
显示：flex；柔性包装：包装
display: inline-block;

.block {
    display: inline-block;
}

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

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
}