如何使用CSS格式化HTML以进行列布局

Question

我正在尝试做一些简单的HTML和CSS来获得一个页面来布局类似下面的图像，但我已经离开了我的元素，甚至不知道如何开始它。现在，我最大的问题是我无法获得客户出生日期和配偶名字出现在自己的行上。我觉得我可以添加div，但是我可能到处都有div（我假设这是件坏事。）

我开始的Here's a JSFiddle。

<div>
  <label for="WebName">Name</label>
  <input type="text" id="WebName" />
</div>
<div>
  <label for="WebEmail">Email</label>
  <input type="text" id="WebEmail" />
</div>
<div>
  <label for="WebPhone">Phone</label>
  <input type="text" id="WebPhone" />
</div>

<hr />

<div style="border: 1px solid black; overflow: hidden;">
  <!-- left -->
  <div style="width: 500px; float:left; border: 1px solid red;">
    <label for="ClientFirstName">Client First Name*</label>
    <input type="text" id="ClientFirstName" />

    <label for="ClientBirthDate">Client Birth Date</label>
    <input type="text" id="ClientBirthDate" />

  </div>

  <!-- right -->
  <div style="float:left; width: 500px; border: 1px solid green;">
    <label for="ClientLastName">Client Last Name*</label>
    <input type="text" id="ClientLastName" />
    <label for="ClientAge">Client Age</label>
    <input type="text" id="ClientAge" />
  </div>
</div>

<hr />

<div>
  <label for="AppointmentDate">Appointment Date</label>
  <input type="text" id="AppointmentDate" />
  <label for="Goals">Goals</label>
  <textarea id="Goals" rows="4" cols="80">
                </textarea>
</div>

Answer 1

我会在这些特定情况下添加div。在布局方面，表单元素可能会很混乱。我发现在div中包装标签+输入是最好的做法。既然你已经在第一部分完成了这一点，你也可以遵循这种模式。

<div class="inputWraper">
 <label for="thisInputName">Some Text</label>
 <input type="text" name="thisInputName" value="" placeholder="What displays />
</div>

从技术上讲，你也可以在标签中包装所有内容而不是div。这有一些优点和缺点，主要是因为它使一切都可点击并增加了焦点。对于复选框和单选按钮特别有用，因为命中区域更大。

<label for="thisInputName">
 <span>Your label text</span>
 <input type="text" name="thisInputName" value="" placeholder="What displays />
</label>