如何在同一行显示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该类和类中.

评论后编辑

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

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