html - 搜索字段显示在我的 asp.net mvc Web 应用程序中的布局之外

Question

我的剃刀视图中有以下内容：-

<div style="float:right">
@using (Ajax.BeginForm(
new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "progress",
    UpdateTargetId = "customerTable"
}))
{
<text>Search</text>  <input placeholder="Search by name.." name="searchTerm" type="text" data-autocomplete-source= "@Url.Action("AutoComplete", "Customer")" /> 
<input class="btn btn-success" type="submit" value="search" />
<img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress" />
}
</div>  
<div id="customerTable">
@Html.Partial("_CustomerTable", Model)
</div>

该布局将在 IE 和 chrome 上显示良好，但在 Firefox 上将超出布局，如下所示：-

那么可能是什么导致了这个布局错误呢？

Answer 1

这与其说是“布局”错误，不如说是 CSS 错误。我猜你没有浮动“客户列表”区域，或者它太宽导致包含你的表单的 div 因为没有空间而被撞倒。

尝试使您的“客户列表”标题不那么宽和/或向左浮动，看看会发生什么。