Css: Corrupt Display For Lower Elements After Show Upper Elements

as you see in my snippet when buttons are hidden => display:none; my display was what i want. but after showing them my display became a mess (Especially in bigger than 1300' Di

Solution 1:

finally i managed to full correct my code. this is final Demo

functionPrev(current) {
  var prev_s = current.match(/\d/g);
  prev_s = prev_s.join("");
  prev_s--;
  prev_s = 'P_jmp' + prev_s;
  document.getElementById(prev_s).scrollIntoView();
}

functionNext(current) {
  var next_s = current.match(/\d/g);
  next_s = next_s.join("");
  next_s++;
  next_s = 'N_jmp' + next_s;
  document.getElementById(next_s).scrollIntoView();
}

functionbtn_H_S(div_id) {
  document.getElementById(div_id).id = (div_id * (-1));
  if (div_id == "1") {
    for (x = 1; x < 14; x++) {
      document.getElementById("P_jmp" + x).style.display = "none";
      document.getElementById("N_jmp" + x).style.display = "none";
    }
  }
  if (div_id == "-1") {
    for (x = 1; x < 14; x++) {
      document.getElementById("P_jmp" + x).style.display = "block";
      document.getElementById("N_jmp" + x).style.display = "inline";
    }
  }
}

* {
  margin: 0;
  padding: 0;
  z-index: 0;
  position: relative;
}
body {
  min-width: 600px;
  max-width: 2000px;
  background: #444;
  padding-left: 5% auto;
  padding-top: 20px;
}
ul {
  width: 90%;
  margin: 0px auto;
}
li {
  list-style-type: none;
  overflow: hidden;
}
li.btn {
  text-align: center;
  display: block;
  background: #ccc;
  padding-top: 10px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  text-decoration: none;
  font-weight: bolder;
  font-family: calibri;
  font-size: 20px;
}
.separator {
  margin: 5px auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #E85039;
  overflow: visible;
}
.separatora {
  text-align: center;
  display: block;
  text-decoration: none;
  font-weight: bolder;
  font-size: 30px;
  color: white;
  text-shadow: 2px00 black, -2px00 black, 02px0 black, 0 -2px0 black, 1px1px black, -1px -1px0 black, 1px -1px0 black, -1px1px0 black;
}
ul>li>input {
  position: absolute;
  background: none;
  width: 5%;
  min-width: 50px;
  height: 100%;
  top: 12px;
  z-index: 100;
  font-size: 20px;
  height: 30px;
}
input.l {
  float: left;
  left: 2%;
}
input.r {
  float: right;
  right: 2%;
}
li+div {
  clear: both;
}
div > .lnk {
  display: block;
  font-weight: bolder;
  text-indent: 15px;
}
div > .lnka {
  padding-top: 10px;
  padding-bottom: 12px;
  display: block;
  text-decoration: none;
  font-family: calibri;
  font-size: 20px;
}
@media all and (min-width: 1300px) {
  .lnk {
    min-width: 48%;
    float: left;
  }
  div > .lnkp {
    display: inline;
  }
  div > .lnk:nth-child(4n+1) {
    margin: 0%2%;
  }
  div > .lnk:nth-child(4n+3) {
    margin-right: 2%;
    margin-left: 1%;
    width: 48%;
  }
  .separator {
    clear: both;
    width: 100%;
    display: block;
  }
  div > .lnk:nth-child(4n+1) a,
  div > .lnk:nth-child(4n+4) a {
    background: #848484;
    color: #F69C12;
  }
  div > .lnk:nth-child(4n+2) a,
  div > .lnk:nth-child(4n+3) a {
    background: #F8F8F8;
    color: black;
  }
  div > .lnk:last-child:not(:nth-child(even)):not(:first-child) {
    border-top: 3px dashed white;
  }
  div > .lnk:last-child:not(:nth-child(even)) {
    width: 98%;
  }
}
@media all and (max-width: 1299px) {
  .lnk {
    width: 100%;
  }
  div > .lnk:nth-child(odd) a {
    color: #F69C12;
    background: #848484;
  }
  div > .lnk:nth-child(even) a {
    background: #F8F8F8;
    color: black;
  }
}
div > .lnk:nth-child(1),
div > .lnk:nth-child(2) {
  margin-top: 15px;
}
div > .lnk:last-child,
div > .lnk:nth-last-child(2):not(:nth-child(even)) {
  margin-bottom: 15px;
}

<ul><liclass="btn"id="1"onclick="btn_H_S(this.id)">> Click To Show or Hide Buttons
    <<br/></li><liclass="separator"><ahref="">
      <----------------Buttons---------------->
    </a><inputclass="l"id="P_jmp1"type="button"onclick="Prev('P_jmp4')"value="<<"><inputclass="r"id="N_jmp1"type="button"onclick="Next(this.id)"value=">>"></li><div><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li></div><liclass="separator"><ahref="">
      <----------------Buttons---------------->
    </a><inputclass="l"id="P_jmp2"type="button"onclick="Prev(this.id)"value="<<"><inputclass="r"id="N_jmp2"type="button"onclick="Next(this.id)"value=">>"></li><div><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li></div><liclass="separator"><ahref="">
      <----------------Buttons---------------->
    </a><inputclass="l"id="P_jmp3"type="button"onclick="Prev(this.id)"value="<<"><inputclass="r"id="N_jmp3"type="button"onclick="Next('N_jmp0')"value=">>"></li><div><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li><liclass="lnk"><ahref="">Wrong Display after buttons apear</a></li></div></ul>