[Resolved] need pagination with previous | pages | next horizontal on the same line

[Author]

Posts

[valerieF-2]

I am trying to: display all the pagination items on the same line

here is my toolset custom pagination

<div class="pages">[wpv-pager-prev-page][wpml-string context="wpv-views"]<< Page précédente[/wpml-string][/wpv-pager-prev-page]  [wpv-pager-nav-links reach="3"][wpv-pager-next-page][wpml-string context="wpv-views"]Page suivante >>[/wpml-string][/wpv-pager-next-page]</div>
</codes>
and my css :

.pages {
padding-top:2em;
text-align:center;
}
.pages ul {
padding:0;
margin:0;
list-style-type:none;
}
.pages li {
display:inline;
padding:0.5em;
}
.pages ul li a {
text-decoration:none;
text-align:center;
padding:5px;
border:2px solid;
}
</codes>

Instead, I got: 3 lines.

Could you help me to see what is wrong ?

[Christian Cox]

Hello, I see your image and it looks like perhaps your ul element is display:block (ul is a block element by default) instead of display:inline or display:inline-block? Or perhaps your container element isn't wide enough to accommodate all the elements in one row? I cannot tell for sure. Debugging custom code and styles is outside the scope of the support we provide here in the forum, so unfortunately I won't be able to provide much advice here. I recommend researching HTML and CSS to understand how to inspect each element and determine which styles are applied, and where they come from. Chrome DevTools documentation is also quite helpful:
hidden link

[valerieF-2]

Thank you for your help, Christian.
The ul element is now with display:inline and it works ! (so simple !)

Have a nice day !