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

问题描述：

我试图格式化两列形式，使得：如何使用类将无表格HTML表单呈现为带有CSS的两列？

的标签上面的每个输入字段或文本区域
一切类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上的代码。

为什么另起炉灶，采用前端框架，如引导，基金会直到你得到足够成熟 –

好吧，我宁愿从做从头开始比不得不过分。 –

我想你是对的，有时候比用无用的风格来扩展你的项目更好。 –

答

试试这个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/

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

相关推荐