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; 
}