对齐不同长度的表单输入元素

Question

我需要创建一个仅使用 HTML 和 CSS 的表单。表单字段的长度取决于它是哪个字段。

我已经尝试了在 SO 和其他使用显示模式之类的网站上找到的几乎所有解决方案，但这些解决方案似乎都针对所有输入字段大小相同的表单。我也尝试使用表格来制作表格，但我对它们的了解不够，无法完成这项工作。如果有人愿意教我如何使用它，我仍然愿意使用桌子。

form {
  margin-top: 25px;
}

.form {
  margin-left: 10px;
  background-color: #fff;
  float: left;
  width: 620px;
}

.form p {
  margin-left: 10px;
}

.form h3,
.summary h3 {
  font-size: 36px;
  background-color: #fff;
  width: auto;
  padding-top: 35px;
}

.form label {
  font-family: Arial, sans-serif;
  font-size: 14px;
  display: block;
  margin-left: 10px;
  color: #8f8f8f;
}

input {
  float: left;
  margin-left: 10px;
  background-color: #f9f9f9;
  border: 1px solid #cdcdcd;
  height: 36px;
  border-radius: 2px;
}

.form span {
  color: #861919;
}

.name {
  width: 288px;
}

.bigbar {
  width: 448px;
}

.smallbar {
  width: 128px;
}

<form action="#" method="POST">
  <label for="firstname">First Name <span>*</span></label>
  <input type="text" id="firstname" required class="name" />
  <label for="lastname">Last Name <span>*</span></label>
  <input type="text" id="lastname" required class="name" />
  <label for="address">Street Address <span>*</span></label>
  <input type="text" id="address" required class="bigbar" />
  <label for="apt">Apt/Unit/Suite #</label>
  <input type="text" id="apt" class="smallbar" />
  <label for="city">City <span>*</span></label>
  <input type="text" id="city" required class="bigbar" />
  <label for="province">Province <span>*</span></label>
  <input type="text" id="province" required class="smallbar" />
  <label for="code">Postal Code <span>*</span></label>
  <input type="text" id="code" required class="smallbar" />
  <label for="phone">Phone Number <span>*</span></label>
  <input type="tel" id="phone" required class="bigbar" />
  <button type="submit" id="submit">Continue Checkout</button>
</form>

最后应该是这样的：https://puu.sh/DQhyH/2aed3ce204.png

但据我所知，它看起来像这样：https://puu.sh/DQhAs/eb0a1eeb5b.png（由于只是创建我的帐户而无法发布图片）

所以它几乎就在那里，但字段没有正确对齐。

Answer 1

这可以通过在td 元素上使用colspan 属性的表格来完成。但是，tables 用于显示数据，不应用于布局（this article 列出了几个原因）。

您需要查看您想要的结果并形成一个包含div 元素的网格。你有几个“行”，所以把每一行的内容放在一个占满宽度的div.row 中。行中的内容是 1,2 或 3 个“列”宽，总共 4 个。所以你用适当的宽度和内联块显示来制作div.col1、div.col2、div.col3。然后只需确保在每行中放置四列。包含的 div 现在确定宽度，因此我们将输入和标签设置为 width:100% 以获取其各自父级的完整宽度。

div.field {
  display: inline-block;
  padding: .5em;
}

div.row,
input,
label,
button {
  width: 100%;
}

form {
  margin-top: 25px;
  width: 620px;
}

form label {
  font-family: Arial, sans-serif;
  font-size: 14px;
  display: block;
  margin-left: 10px;
  color: #8f8f8f;
}

input {
  /*float: left;*/
  margin-left: 10px;
  background-color: #f9f9f9;
  border: 1px solid #cdcdcd;
  height: 36px;
  border-radius: 2px;
}

form span {
  color: #861919;
}

.col2 {
  width: 288px;
}

.col3 {
  width: 448px;
}

.col1 {
  width: 128px;
}

<form action="#" method="POST">
  <div class="row">
    <div class="col2 field">
      <label for="firstname">First Name <span>*</span></label>
      <input type="text" id="firstname" required/>
    </div>
    <div class="col2 field">
      <label for="lastname">Last Name <span>*</span></label>
      <input type="text" id="lastname" required/>
    </div>
  </div>
  <div class="row">
    <div class="col3 field">
      <label for="address">Street Address <span>*</span></label>
      <input type="text" id="address" required class="bigbar" />
    </div>
    <div class="col1 field">
      <label for="apt">Apt/Unit/Suite #</label>
      <input type="text" id="apt" />
    </div>
  </div>
  <div class="row">
    <div class="col3 field">
      <label for="city">City <span>*</span></label>
      <input type="text" id="city" required/>
    </div>
    <div class="col1 field">
      <label for="province">Province <span>*</span></label>
      <input type="text" id="province" required/>
    </div>
  </div>
  <div class="row">
    <div class="col1 field">
      <label for="code">Postal Code <span>*</span></label>
      <input type="text" id="code" required/>
    </div>
    <div class="col3 field">
      <label for="phone">Phone Number <span>*</span></label>
      <input type="tel" id="phone" required/>
    </div>
  </div>
  <div class="row">
    <div class="col1 field"></div>
    <div class="col2 field">
      <button type="submit" id="submit">Continue Checkout</button>
    </div>
    <div class="col1 field"></div>
  </div>
</form>