如何在Mvc 4中以正确的格式并排获取标签和文本框

时间:2013-12-12 12:16:34

标签: asp.net-mvc-4 razor formview

这是我的代码

<div>
                @Html.LabelFor(u => u.CompanyName)
                @Html.TextBoxFor(u => u.CompanyName)
                @Html.ValidationMessageFor(u => u.CompanyName)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.Address1)
                @Html.TextBoxFor(u => u.Address1)
                @Html.ValidationMessageFor(u => u.Address1)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.Adderss2)
                @Html.TextBoxFor(u => u.Adderss2)
                @Html.ValidationMessageFor(u => u.Adderss2)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.City)
                @Html.TextBoxFor(u => u.City)
                @Html.ValidationMessageFor(u => u.City)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.State)
                @Html.TextBoxFor(u => u.State)
                @Html.ValidationMessageFor(u => u.State)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.Country)
                @Html.TextBoxFor(u => u.Country)
                @Html.ValidationMessageFor(u => u.Country)
            </div>
            <br />
            <div>
                @Html.LabelFor(u => u.ContactPerson)
                @Html.TextBoxFor(u => u.ContactPerson)
                @Html.ValidationMessageFor(u => u.ContactPerson)
            </div>
            <br />

这里的标签和文本框在mvc中的顺序不正确(asp.net中的表格格式) 根据他们的尺寸,他们并排调整.. 你可以建议我如何以适当的方式并排调整所有标签和文本框

1 个答案:

答案 0 :(得分:2)

将您的代码添加到div容器

<div id="alignform">
           <div>
                @Html.LabelFor(u => u.CompanyName)
                @Html.TextBoxFor(u => u.CompanyName)
                @Html.ValidationMessageFor(u => u.CompanyName)
            </div>
            // rest of your code
<div>

最后在html页面中添加style标签

<style>
    #alignform label {
        width: 300px; //adjust yourself according to contents
        display:inline-block;
    }
</style>