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

Question

在我的MVC视图中，我有PagedList.PagedCount和@Html.PagedListPager成功显示数据，但它们显示在不同的行上，因为PagedList.PagedCount呈现为没有标记的文本和{ {1}}呈现为div块。所以有意义的是会有一个换行符。但有没有办法让他们在同一条线上？

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

（1）用@Html.PagedListPager包装器包装它    <div style="display:inline-block">并没有任何效果。

（2）取出两组代码之间的任何空格。 （现在很有道理，但无论如何我都试过了。）

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

<div style="display:inline">

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

这是浏览器源的样子：

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

Answer 1

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

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

如果失败，您可以将页面数量包装在div中，并将float:left添加到该pagination-container类。

评论后修改

我在示例项目中使用了以下内容，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>

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