css - 如何在 mvc razor 中对齐编辑器的文本框？

Question

我有 Razor EditorFor<> 为我创建了一些文本框，但对齐方式很糟糕，我无法正确调整它。

我如何对齐所有文本框以与文本开始相同的距离？

查看:

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

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

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

    @Html.LabelFor(m => m.VehicleRegistration)
    @Html.EditorFor(m => m.VehicleRegistration)
    <br/>
    @Html.LabelFor(m => m.VehicleMake)
    @Html.EditorFor(m => m.VehicleMake)
    <br/>
    @Html.LabelFor(m => m.VehicleRange)
    @Html.EditorFor(m => m.VehicleRange)
    <br/>
    @Html.LabelFor(m => m.VehicleModel)
    @Html.EditorFor(m => m.VehicleModel)
    <br/>

</div>

型号:

namespace SpendDirect.WebUI.Models.ViewModels
{
    public class APNewQuoteViewModel
    {
        [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; }

        [Display(Name = "Vehicle Registration")]
        public string VehicleRegistration { get; set; }

        [Display(Name = "Vehicle Make")]
        public string VehicleMake { get; set; }

        [Display(Name = "Vehicle Range")]
        public string VehicleRange { get; set; }

        [Display(Name = "Vehicle year Model")]
        public string VehicleModel { get; set; }

    }
}

Answer 1

你可以这样使用:

@Html.LabelFor(model => model.TITLEID, htmlAttributes: new { @class = "control-label col-md-2" , @style = "float: left;text-align: left;" })