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

Question

In my MVC view, I have PagedList.PagedCountand @Html.PagedListPagerthat successfully display their data, but they appear on separate lines, because it PagedList.PagedCountdisplays as text without a tag, and @Html.PagedListPagerdisplays as a div. Therefore, it makes sense that there will be a line break. But is there a way to get them on the same line?

So far I have tried without success:

(1) A wrapper with a wrapper <div style="display:inline-block">, as well as   <div style="display:inline">this, had no effect.

(2) By removing any spaces between both sets of code. (Now that makes sense, but I tried anyway.)

This is the code that shows the page and page buttons.

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

Here's what it looks like in a browser.

Here's what the browser looks like:

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 .

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>

, .