Pagination - selected page icon always in the middle or visible

Question

Pagination - selected page icon always in the middle or visible

Navigation

#1 by (1 votes)

0

In my structure, I want it to be responsive to the selected page always visible, if possible in the middle of its class and "active", and the other options are hidden and can appear if the width of the page is increased

.paginacao {
  max-width: 870px;
  overflow: hidden;
  width: 100%;
  margin: 0px;
  display: inline-flex;
  height: 52px;
}

.paginacao * {
  list-style: none;
  text-decoration: none;
}

.paginacao ul {
  margin: 0px;
  display: inline-flex;
  padding: 0px;
  width: calc(100% - 118px);
}

.inicio,
.fim {
  background: dodgerblue;
  color: #fff;
}

.inicio a,
.fim a {
  color: #fff;
}

.paginacao li {
  font-family: Trebuchet MS, arial;
  font-size: 18px;
  text-decoration: none;
  border-radius: 3px;
  text-align: center;
  height: 20px;
  min-width: 20px;
  margin: 2.5px;
  padding: 12.5px;
  box-shadow: 2px 0px 5px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.paginacao ul li a {
  color: #222;
}

.paginacao ul li.ativo a {
  color: dodgerblue;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<center class="paginacao">
  <li class="inicio">
    <a href="#">
      <<</a>
  </li>
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="ativo"><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
  </ul>
  <li class="fim"><a href="#">>></a></li>
</center>

javascript css

asked by anonymous 30.10.2018 / 18:19

1 answer

HTTP Status 400 - Bad Request - Spring MVC ion-card horizontal

score 1 · Answer 1

Dude I made this model, but I did not like it very much, not rss ... I say this because it is not dynamic enough for my taste, but I did not find it any other way ... The trick here is to "erase" the nth-child as the screen decreases using @media . This way I got this result:

Thecodefortheaboveimageisthis!

nav {
    display:flex;
    justify-content: center;
}
.btns {
    display:flex;
    justify-content: center;
}
.ativo a {
    color: dodgerblue;
}

a {
  font-family: Trebuchet MS, arial;
  font-size: 18px;
  text-decoration: none;
  border-radius: 3px;
  text-align: center;
  margin: 2.5px;
  padding: 12.5px;
  box-shadow: 2px 0px 5px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  color: #222;
}

nav .esq a,
nav .dir a {
    background-color: dodgerblue;
    color: #fff;
    margin: 0;
}
nav .esq,
nav .dir {
    z-index: 2;
}

@media screen and (max-width:500px) {
    .btn:nth-child(1),
    .btn:nth-child(10) {
        display: none;
    }
}
@media screen and (max-width:420px) {
    .btn:nth-child(2),
    .btn:nth-child(9) {
        display: none;
    }
}
@media screen and (max-width:320px) {
    .btn:nth-child(3),
    .btn:nth-child(8) {
        display: none;
    }
}
@media screen and (max-width:300px) {
    .btn:nth-child(4),
    .btn:nth-child(7) {
        display: none;
    }
}

<nav>
    <div class="esq">
        <a href="#"> << </a>
    </div>
    <div class="btns">
        <div class="btn">
            <a href="#">1</a>
        </div>
        <div class="btn">
            <a href="#">2</a>
        </div>
        <div class="btn">
            <a href="#">3</a>
        </div>
        <div class="btn">
            <a href="#">4</a>
        </div>
        <div class="btn">
            <a href="#">5</a>
        </div>
        <div class="btn ativo">
            <a href="#">6</a>
        </div>
        <div class="btn">
            <a href="#">7</a>
        </div>
        <div class="btn">
            <a href="#">8</a>
        </div>
        <div class="btn">
            <a href="#">9</a>
        </div>
        <div class="btn">
            <a href="#">10</a>
        </div>
    </div>
    <div class="dir">
        <a href="#"> >> </a>
    </div>
</nav>