MVC剃须刀如何对齐文本框？

Question

我正在使用MVC 4和razor，并在视图中放置了标签和文本框。所有文本框都正对着标签，我如何将标签空间移动到左右，并保持对齐？

剃刀：

    @Html.LabelFor(m => m.Date)
    @Html.TextBoxFor(m => m.Date)
    <br/>
    @Html.LabelFor(m => m.QuoteNumber)
    @Html.TextBoxFor(m => m.QuoteNumber)
    <br/>
    @Html.LabelFor(m => m.ClaimNumber)
    @Html.TextBoxFor(m => m.ClaimNumber)
    <br/>
    @Html.LabelFor(m => m.MotorBodyRepairer)
    @Html.TextBoxFor(m => m.MotorBodyRepairer)
    <br/>

目前它看起来像这样：

Answer 1

<强>模型

添加显示属性：

        [Display(Name="Date")]
        public DateTime Date { get; set; }
        [Display(Name="Quote Number")]
        public string QuoteNumber { get; set; }
        [Display(Name="Claim Number")]
        public string ClaimNumber { get; set; }
        [Display(Name="Motor Body Repairer")]
        public string MotorBodyRepairer { get; set; }

查看

使用编辑器

@Html.EditorFor(m => m)

<强> CSS

将此添加到样式表，将值更改为套件。

.editor-label > label
{
    float: left;
    width: 150px;
}

屏幕抓取

<强>更新

替换它：

<div style="float: left; width: 50%;">

    @Html.EditorFor(m => m.Date)
    <br/>
    @Html.EditorFor(m => m.QuoteNumber)
    <br/>
    @Html.EditorFor(m => m.ClaimNumber)
    <br/>
    @Html.EditorFor(m => m.MotorBodyRepairer)
    <br/>

</div>

有了这个：

<div style="float: left; width: 50%;">
    @Html.EditorFor(m => m)
</div>