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

Question

我正在嘗試做一些簡單的HTML和CSS，以獲取一個頁面來布局如下圖所示的內容，但是我離我的元素很遠，甚至不確定如何開始它。 現在，我最大的問題是我無法獲得客戶的出生日期和配偶的名字。 我覺得我可以添加div，但是到那時我可能到處都有div（我認為那是一件壞事 。）

這是我已經開始的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>