pagination style css, html

Question

I am having problems with creating pagination like this:

What I have: jsfiddle

 .pager-wrapper { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #dddddd; } li { float: left; border-top: solid 3px black; } a.mylink { display: block; padding: 8px 30px; } .mylink:hover { border-top: solid 3px yellow; } .myactive { border-top: solid 3px yellow; } 

 <ul id="pager-container" class="pager-wrapper" tag="div"> <li class="mypre"> <a class="mylink" href="" data-page="0">«</a> </li> <li> <a class="mylink" href="" data-page="0">1</a> </li> <li class="myactive"> <a class="mylink" href="" data-page="1">2</a> </li> <li class="mynext"> <span><a class="mylink" href="" data-page="1">»</a></span> </li> </ul> 

First problem: it should be on the full width page, but I don't know how to do it.

Second problem: .mylink:hover should look the same as .myactive

Can you help me with my problem?

Answer 1

1. (Will update with this answer later.)

2. The problem is, you've got .myactive on the parent li, which has a completely separate border to .mylink:hover. This is what's causing the difference in appearance and odd behaviour.

If you just move the .myactive class to the link within the li, it should work as expected. Like this:

<li>
    <a class="mylink myactive" href="" data-page="1">2</a>
</li>

Demo: jsFiddle .

Answer 2

check this fiddle with display: flex;

.pager-wrapper {
  list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #dddddd;
 display: flex;
 }

 li {
  flex: auto;
  border-top: solid 3px black;

 }

https://jsfiddle.net/18jg97vu/2/