格式化JQuery数据表页面长度和搜索框时出错

我遇到了一个问题，“页面长度”显示在三行而不是一行上：

如果可能，我希望在datatable上方的一行中显示“Show…entries”和搜索框，以减少页面空间。类似这样的事情（很抱歉“油漆”工作）：

有人知道我如何通过CSS来做这件事吗？如果我不必在每个有datatable的页面上都使用Javascript，那就太好了

谢谢， 特洛伊

更新代码：

@Imports DRGMITGDataCommon
@Imports DRGMITGWeb
@ModelType IEnumerable(Of DRGMITGDataCommon.LocationDto)

@Code
    ViewData("Title") = "Location Index"
    Layout = "~/Views/Shared/_Layout.vbhtml"

    Dim LocationTypes = LookupValuesHelper.LocationTypes
    Dim Regions = LookupValuesHelper.Districts
    Dim TownNames = LookupValuesHelper.TownNames
    Dim Results = TryCast(ViewBag.Results, List(Of LocationDto))
End Code

<div style="text-align:left; width:280px">
    <h2 class="float-left" style="margin-top: 0px">Locations</h2>
    @If DRGMApplication.UserIsAdmin Then
        @<button title="Create New Location" onclick="location.href='@Url.Action("Create","Location")'" class ="loading" style= "display:inline-block; float: right; margin:auto" ><span class="glyphicon glyphicon-star" style="margin-right:5px" ></span>New Location</button>
    End If  
</div>

<div class="pull-right">
    @If Results.Count() > Model.Count() Then
        @<p>Showing @Model.Count() Of @ViewBag.Results.Count() Total Data Records</p>
    Else
        @<p>@(Model.Count()) Results Found</p>
    End If
</div>

<div style="margin-right:5px">

<table id="MainTable" class="display" cellpadding="0" cellspacing="0">
    <thead valign="bottom" style="font-size:12px">
        <tr>
            <th width="5%">Loc Id</th>
            <th width="5%">RC</th>
            <th width="10%">Town</th>
            <th width="10%">Type & #</th>
            <th width="10%">House #</th>
            <th width="14%">Street Address</th>
            <th width="10%">Quad</th>
            <th width="20%">Location Desc</th>
            <th width="16%"></th>
        </tr>
    </thead>
    <tbody>
    @For Each item In Model
        Dim currentItem = item
        Dim MapLink As String
        If Not String.IsNullOrWhiteSpace(currentItem.Maplink) Then
            MapLink = item.MapLink.Replace("#","")
        End If
        If currentItem.TownId IsNot Nothing Then
            currentItem.TownName = TownNames.Where(Function(t) t.Id = currentItem.TownId).FirstOrDefault()
            currentItem.TownName.District = Regions.Where(Function(t) t.Id = item.TownName.DistrictId).FirstOrDefault()
        Else 
            item.TownName = New TownNameDto With {.District = New DistrictDto With {.Code = "Not Listed"} }
        End If
        currentItem.LocationType = LocationTypes.Where(Function(t) t.Id = item.LocationTypeId).FirstOrDefault() 
        Dim stationId = String.Concat(currentItem.LocationType.Value, " ", currentItem.ValveID, currentItem.DRSNumber, " ", currentItem.ValveLocation)

    @<tr>
        <td><div style="max-width:50px">
            @If String.IsNullOrWhiteSpace(MapLink) = False Then
                @<a title="Open Map" href="@MapLink" target="_new" class="glyphicon glyphicon-globe" style="text-decoration: none"></a>
            End If
            @Html.DisplayFor(Function(modelItem) currentItem.Id)</div>
        </td>
        <td><div style="max-width:50px">@currentItem.TownName.District.Code</div></td>
        <td>@currentItem.TownName.Name</td>
        <td>@stationId</td>
        <td>@currentItem.HouseNumber</td>
        <td>@currentItem.StreetAddress</td>
        <td>@currentItem.Quadrant</td>
        <td>@Html.DisplayFor(Function(modelItem) currentItem.LocationDesc)</td>
        <td>
            <div style="text-align:left">
                @If DRGMApplication.UserIsAdmin Then
                    @<button title="Edit Location" onclick="location.href='@Url.Action("Edit","Location", New With {.id = currentItem.Id})'" class ="loading" style= "display:inline-block; margin:auto" ><span class="glyphicon glyphicon-edit" style="margin-right:1px" ></span></button>
                End If  
                <button title="New Visit" onclick="location.href='@Url.Action("Create", "Visit", New With {.locId = currentItem.Id})'" class ="loading" style= "display:inline-block; margin:auto" ><span class="glyphicon glyphicon-plus" ></span></button>
                @If item.HasVisits  Then
                    @<button title="Previous Visits" onclick="location.href='@Url.Action("LocationVisits","Visit", New With {.locId = currentItem.Id})'" class ="loading" style= "display:inline-block; margin:auto" ><span class="glyphicon glyphicon-search" ></span></button>
                End If
            </div>        
        </td>
    </tr>
    Next
    </tbody>
</table>
</div>

---

你也能粘贴代码吗？HTML标记和CSS可能是我们所需要的，但越多越好。如果没有看到一些标记，很难提供帮助。如果它都在一个表中，请尝试将colspan添加到该td中**text and box**@Lopsided-我在构建表的地方添加了代码，但是，我相信搜索页面长度对象是由jQuery动态创建的。我找到了这个链接，但我似乎无法为我的场景找到任何有用的东西：@JLane，我添加了代码，但是，请查看我对“不平衡”的回应。好吧，我在这方面不会有太大帮助。也许这可以引导您朝着正确的方向前进，使用开发人员工具找到页面长度容器的CSS类。（chrome中的control+shift+c将在选择器处于激活状态时自动调出刀具）。一旦你得到了这个类，试着给你找到的类添加一个nowrap或width。我相信IE中的开发者工具是F12，然后单击鼠标图标选择。

.dataTables_wrapper .dataTables_length {
  float: left;
}
.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}
.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.5em;
}