如何在mvc razor中为编辑器对齐文本框？

Question

我有剃须刀EditorFor＆lt;＆gt;为我创建了一些文本框，但对齐很糟糕，我不能正确将它拉直。

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

查看：

<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

您可以尝试以下操作：

Dictionary<string, object> labelHtmlProperties = new Dictionary<string, object>();
labelHtmlProperties.Add("style", "width: 100px;"); //set the width as big you need...

在每个@Html.LabelFor中添加HTML属性：

@Html.LabelFor(m => m.Date, labelHtmlProperties )
@Html.EditorFor(m => m.Date)
<br/>
@Html.LabelFor(m => m.QuoteNumber, labelHtmlProperties )
@Html.EditorFor(m => m.QuoteNumber)
<br/>
...

通过使用包含HTML属性的相同Dictionary，您可以确保使用相同的属性呈现所有标签。或者，您可以在标签中添加一个类，并在CSS中添加宽度。或者甚至更好，在容器div s。

的上下文中设置标签的样式

Answer 2

只需应用CSS

label
{
width:200px;
float:left;
text-align:left
}

input[type=text]
{
width:200px;
float:left;
}

如果您想申请少量标签，只需添加类似field的类并编写如下所示的css选择器，最推荐

label.field
{
//style goes
}

然后

@Html.LabelFor(m => m.Date, new {@class="field"})

要对HTMLAttributes应用EditorFor，您可能需要将其作为 ViewData 发送，并在编辑模板中使用它。

在MVC 5.1中，您可以为EditorFor使用htmlAttributes参数。 Read the release notes

Answer 3

您可以这样使用：

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