MVC4脚手架

Question

我有MVC4脚手架创建的.cshtml文件看起来像这样创造如何重新生成的字段：

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 

    <fieldset> 
     <legend>BicycleSellerListing</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.BicycleManfacturer) 
     </div> 
     <div class="editor-field"> 
      @Html.DropDownList("ManufacturerList") 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.BicycleType) 
     </div> 
     <div class="editor-field"> 
      @Html.DropDownList("TypeList") 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.ListingPrice) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.ListingPrice) 
      @Html.ValidationMessageFor(model => model.ListingPrice) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Comments) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Comments) 
      @Html.ValidationMessageFor(model => model.Comments) 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 

取而代之的是标签和列在一个单一的垂直列生成，我想重新排列这个，以便我在第二列中有一列中的标签和编辑字段（更多是传统的数据输入表格）。我对MVC 4和HTML5很陌生，并不知道如何去做这件事。如果有人可以帮我重新安排这个.cshtml代码来实现这一点，我会非常感激。

Answer 1

下面是使用float:left和:before

http://jsfiddle.net/fdLca/

.editor-label { 
    float:left; 
    width:20%; 
} 

.editor-label:before { 
    clear:left; 
} 

.editor-field { 
    float:left; 
    width:80%; 
} 

为了避开使用的一种方法：如果之前你需要支持older IE（< 9），那么你可以添加纯粹用来元素在每个字段和标签之间清楚。

http://jsfiddle.net/fdLca/1/

HTML

<div class="editor-label"> 
    label1 
</div> 
<div class="editor-field"> 
    @Html.DropDownList("ManufacturerList") 
</div> 

<div class="clear"></div> 

CSS

.clear { 
    clear:left; 
}