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

尝试将每个输入字段（def __eq__(self, other): if isinstance(other, int): return self.value == other return type(self) == type(other) and self.value == other.value和<input>对）包装在包含<label>元素中，并在div上使用它：

<div>

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

Answer 4

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

试试这个： {{3}}

.block {
    display: inline-block;
}

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

4 个答案: