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

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
}

Answer 2

我同意为此使用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> 

Answer 3

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

display: inline-block;

带有边距和填充值，可以使每个外观看起来都令人满意。

Answer 4

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

试试这个： JSFiddle示例

.block {
    display: inline-block;
}