如何让 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 class，但起初我想看看是否有人知道在不破坏 [=] 的情况下将两个项目放在同一行的方法38=] class.

Answer 1

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

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

否则，您可以将页数包装在 div 中，然后将 float:left 添加到 pagination-container class.

评论后编辑

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

Razor 视图：

<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>

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

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

How can I get a PagedList.Pagecount and @Html.PagedListPager to display on same line?

css

pagedlist

razor

asp.net-mvc-5