Damian Damian - 2 months ago 20
CSS Question

pagination style css, html

I have problem with create pagination like this: image

What I have: jsfiddle

HTML

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


CSS

.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;
}


First problem: it should be on the full width page and 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

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/

Comments