Html Question posted in
Some basic documentation can be found here.

Html – Previous and Next button with flexbox, how to place them at the left and the right respectively?

I am trying to build a simple pagination system where the user can click on a Next/Prev button to navigate to the next/previous page. I want to place the buttons to the left of the screen and to the right respectively and I did that with flexbox by using justify-content: space-between.

It works fine when the two buttons are displayed but I am using some PHP logic to conditionally display them based on the ability to navigate to the previous or the next page. For instance, on the 1st page, one can’t navigate to a previous page so I don’t the Prev button to be present. And that’s where the problem appears : if the Prev button is absent, the Next button is placed on the left.

What can I do to keep the Next button to the right even if the Prev button is absent?

div{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

a.a{
  background: #88f;
  color: #fff;
  padding: 5px 20px;
}

/*a.a:nth-child(1){
  display: none;
}*/
<div>
<a class="a">Prev</a>
<a class="a">Next</a>
</div>

The PHP logic is very simple, it looks like this :

<?php if($no_pages_left):?>
<a class="a">Prev</a>
<?php endif ?>
<?php if($no_pages_right):?>
<a class="a">Next</a>
<?php endif ?>
Tags:

2

Answers


  1. 0 
    :nth-child(2 of .a) {
  margin-left: auto;
}

    will fix it, automatically expanding the element’s left margin as much as possible.

    div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px; /* for demo */
}

a.a {
  background: #88f;
  color: #fff;
  padding: 5px 20px;
}

 :nth-child(2 of .a) {
  margin-left: auto;
}

a.a:nth-child(1) {
  display: none;
}
    <div>
  <a class="a">Prev</a>
  <a class="a">Next</a>
</div>
    Login or Signup to reply.
  2. 0 
    div {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.a {
  background: #28b2ed;
  color: #fff;
  padding: 5px 20px;
}

    <div>
  <a class="a">Prev</a>
  <a class="a">Next</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search