Css 样式未按预期显示

从我这里可以得到以下代码：

@model SuburbanCustPortal.Models.AddCustomerModel

@{
  ViewBag.Title = "Add an Existing Account";
}

<h2>Add an existing account.</h2>
<p>
    Use the form below to add an existing account to your web login. 
</p>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true, "Account not found. Please verify the infomartion below and try again.")

  <div>
    <fieldset>
      <legend>Account Information</legend>

      <div>
        <label class="small-label">Branch</label><label class="large-label">Account Number</label>      
      </div>

      <br />

      <div>
        @Html.TextBoxFor(m => m.Branch, new { @class = "small-textbox" }) 
        @Html.TextBoxFor(m => m.AccountNumber, new { @class = "large-textbox" })
      </div>

      <div>
        @Html.ValidationMessageFor(m => m.Branch) 
        <br />
        @Html.ValidationMessageFor(m => m.AccountNumber) 
      </div>

      <br />     
      <br />
      <br />

      <fieldset>
        <legend>AND</legend>

          <div class="editor-label">
            @Html.LabelFor(m => m.LastName)
          </div>
          <div class="editor-field">
            @Html.TextBoxFor(m => m.LastName)
            @Html.ValidationMessageFor(m => m.LastName)
          </div>

          <br />

          <label class="excited-label">- OR -</label>

          <div class="editor-label">
            @Html.LabelFor(m => m.PhoneNumber)
          </div>
          <div class="editor-field">
            @Html.TextBoxFor(m => m.PhoneNumber)
            @Html.ValidationMessageFor(m => m.PhoneNumber)
          </div>

      </fieldset>

      <p>
        <input type="submit" value="Register" />
      </p>

    </fieldset>
  </div>
}

这些行的css工作不正常：

@Html.TextBoxFor(m => m.Branch, new { @class = "small-textbox" }) 
@Html.TextBoxFor(m => m.AccountNumber, new { @class = "large-textbox" })

它不应用小文本框或大文本框

即使我使用

或，它也会在一行上显示所有内容

以下是它所展示的内容：

---

有人知道为什么我的表单显示得很奇怪吗？

这些元素的Css工作正常。它们都是向左浮动的，这意味着除非它们的包含元素中的空间用完，否则它们将彼此相邻地浮动

如果您想让它们在新行上断开，则需要应用样式

clear:left或
清除：两者都有

e、 g

我明白，知道为什么宽度部分不工作吗？我没有澄清我知道的那部分。我将更新我的帖子。您的输入宽度没有按预期工作，因为您正在将
input[type=“text”]
的宽度设置为
200px
。因此，要么删除这个，要么将其设置为
input.small textbox{width…}
我很抱歉没有得到这个部分，但我在input.small-textbox{width:50；}的末尾添加了这一行。small-textbox{width:50；}并没有对文本框进行任何更改。如果你在Google Chrome中打开网站，右键单击输入并从菜单中选择“Inspect element”，你将能够看到css是如何应用的，以及是什么导致了这个问题。
@Html.TextBoxFor(m => m.Branch, new { @class = "small-textbox" }) 
@Html.TextBoxFor(m => m.AccountNumber, new { @class = "large-textbox" })

.large-textbox 
{
  clear: left;
  float: left;
  margin: 1em 0 0 0;
  width: 150px;
}