html - 如何使用 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>