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

使用在colspan元素上具有td属性的表，可以很容易地做到这一点。但是，table用于显示数据，而不应用于布局（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>

Answer 2

您必须将所有内容包装在div上才能正确对齐，这是完整的示例：https://codepen.io/anon/pen/PrxmWj

<section>
<div class="container">
<div class="column">
<form action="#" method="POST">

 <div class="col1">
  <div class="row column">
    <label for="firstname">First Name <span>*</span></label>
    <div class="form-group">
    <input type="text" id="firstname" required class="name" />
    </div>
  </div>

  <div class="row column">
    <label for="firstname">Last Name <span>*</span></label>
    <div class="form-group">
    <input type="text" id="lastname" required class="name" />
    </div>
  </div>
 </div>

 <div class="col2">
   <div class="row column">
    <label for="firstname">Street Address <span>*</span></label>
    <div class="form-group">
    <input type="text" id="sta" required class="name" />
    </div>
  </div>

  <div class="row column">
    <label for="firstname">Apt/Unit/Suite # <span>*</span></label>
    <div class="form-group">
    <input type="text" id="apt" required class="name" />
    </div>
  </div>
</div>

 <div class="col3">
  <div class="row column">
    <label for="firstname">City <span>*</span></label>
    <div class="form-group">
    <input type="text" id="city" required class="name" />
    </div>
  </div>


   <div class="row column">
    <label for="firstname">Province <span>*</span></label>
    <div class="form-group">
    <input type="text" id="province" required class="name" />
    </div>
  </div>
 </div>

 <div class="col4">
   <div class="row column">
    <label for="firstname">Postal Code <span>*</span></label>
    <div class="form-group">
    <input type="text" id="pc" required class="name" />
    </div>
  </div>

  <div class="row column">
    <label for="firstname">Phone Number <span>*</span></label>
    <div class="form-group">
    <input type="text" id="pn" required class="name" />
    </div>
  </div>
 </div>

<button type="submit" id="submit">Continue Checkout</button>


</form>
</div>
</div>
</section>

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

2 个答案: