如何让 PagedList.Pagecount 和 @Html.PagedListPager 显示在同一行？

Question

在我的 MVC 视图中，我有一个 PagedList.PagedCount 和 @Html.PagedListPager 成功显示了它们的数据，但它们出现在不同的行上，因为 PagedList.PagedCount 呈现为没有标签的文本，而 @Html.PagedListPager 呈现为div 块。所以有一个换行符是有道理的。但是有什么办法可以让他们在同一条线上呢？

到目前为止，我尝试过没有成功：

(1) 使用<div style="display:inline-block"> 包装器以及 <div style="display:inline"> 没有效果。

(2) 去掉两组代码之间的任何空格。 （现在说得通了，但我还是试过了。）

这是显示页数和页面按钮的代码。

Page @(pagedList.PageCount < pagedList.PageNumber ? 
     0 : pagedList.PageNumber) of @pagedList.PageCount

@Html.PagedListPager(pagedList, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

这就是它在浏览器中的样子。

这是浏览器源代码的样子：

我可以尝试深入研究 PagedListPager css 类，但起初我想看看是否有人知道如何将两个项目放在同一行而不破坏 css 类。

Answer 1

这可能有点小技巧，但是您可以尝试使用 !important 属性的内联样式吗？

<div style="display:inline-block !important">

如果做不到这一点，您可以将页数包装在一个 div 中，并将 float:left 添加到该类和 pagination-container 类中。

在 cmets 之后编辑

我在示例项目中使用了以下内容，现在 div 并排显示。我创建了两个新的 div 元素并将vertical-align:middle 和display:inline-block 添加到它们。

剃刀视图：

<div class="page-count" style="display:inline-block; vertical-align:middle;">
    Page @(Model.PageCount < Model.PageNumber ?
         0 : Model.PageNumber) of @Model.PageCount
</div>

<div class="pagination" style="display:inline-block; vertical-align:middle;">
    @Html.PagedListPager(Model, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
</div>

呈现的 HTML：

<div style="display:inline-block;vertical-align:middle;" class="page-count">
    Page 5 of 100
</div>

<div style="display:inline-block;vertical-align:middle;" class="pagination">
    <div class="pagination-container"><ul class="pagination"><li><a href="/?page=1">1</a></li><li><a href="/?page=2">2</a></li><li><a href="/?page=3">3</a></li><li><a href="/?page=4">4</a></li><li class="active"><a>5</a></li><li><a href="/?page=6">6</a></li><li><a href="/?page=7">7</a></li><li><a href="/?page=8">8</a></li><li><a href="/?page=9">9</a></li><li><a href="/?page=10">10</a></li><li class="disabled PagedList-ellipses"><a>…</a></li><li class="PagedList-skipToNext"><a rel="next" href="/?page=6">»</a></li><li class="PagedList-skipToLast"><a href="/?page=100">»»</a></li></ul></div>
</div>

这显然不是使用内联样式的最干净的解决方案。