如何使用类使用 CSS 将无表格 HTML 表单呈现为两列？

Question

我正在尝试格式化一个两列的表单，以便：

• 标签位于每个输入字段或文本区域的上方
• 类 col1 中的所有内容都在左侧的列中
• 类 col2 中的所有内容都在右侧的列中
• col12 类中的所有内容都跨越两列

这是我需要使用的 HTML 代码：

    <div id="contactForm">
      <form method="post" action="">
        <h3>Contact us</h3>
        <p>To send us a work order, fill in the form below.<br /><strong>All the (*) fields are mandatory.</strong></p>
        <fieldset>
          <div class="col1">
            <label for="form_firstname">Firstname <span class="required">*</span></label>
            <input type="text" id="form_firstname" name="form_firstname" value="" />
          </div>
          <div class="col2">
            <label for="form_lastname">Lastname <span class="required">*</span></label>
            <input type="text" id="form_lastname" name="form_lastname" value="" />
          </div>
          <div class="col1">
            <label for="form_address">Address</label>
            <input type="text" id="form_address" name="form_address" value="" />
          </div>
          <div class="col2">
            <label for="form_city">City</label>
            <input type="text" id="form_city" name="form_city" value="" />
          </div>
          <div class="col1">
            <label for="form_email">Email <span class="required">*</span></label>
            <input type="text" id="form_email" name="form_email" value="" />
          </div>
          <div class="col2">
            <label for="form_phone">Phone <span class="required">*</span></label>
            <input type="text" id="form_phone" name="form_phone" value="" />
          </div>
          <div class="col12">
            <label for="form_attachment">Add Attachment <span class="form_attachment">*</span></label>
            <textarea id="form_attachment" name="form_attachment" rows="5"></textarea>
          </div>
          <div class="col12">
            <label for="form_message">Message <span class="required">*</span></label>
            <textarea id="form_message" name="form_message" rows="5"></textarea>
          </div>
          <div class="col12">
            <label for="form_message">Message <span class="required">*</span></label>
            <input type="submit" value="Send" formnovalidate="formnovalidate" />
          </div>
        </fieldset>
      </form>
    </div>

如何编码 CSS 以根据需要设置此 HTML 的样式？

这是JSFiddle上的代码。

Answer 1

试试这个 CSS：

#contactForm{
    width: 80%;
}
label,.col1,.col2,.col12{display: block;}
.col1{ float:right;}
.col2{float:left;}
.col12{clear:both;}
textarea{
    display: block;
    width: 100%;
}

http://jsfiddle.net/rx2gjpdw/3/