分頁按鈕樣式

裡層div絕對定位，因為不知道具體按鈕數量,所以整個寬度是自適應的，用絕對進行居中，外層div相對定位，控制上下距離，適用於不用頁面不同高度需求，只用一次就絕對定位硬寫。。。。

<div class="bb">
  <div class="num">
      <span class="num_left numon"><</span>
      <span class="num_right ">></span>
      <span class="pop popon">1</span>
      <span class="pop">2</span>
      <span class="pop">3</span>
      <span class="pop">4</span>
      <span class="pop">5</span>
      <span class="pop popon">5</span>
      <span class="pop">5</span>
   </div>
</div>

.bb{
   position: relative;
  margin-top:40px;
  
}
    .num{
        top: 0px;
        padding: 5px 36px;
        height: 21px;
        line-height: 21px;
        background-color: #f0f0f0;
        position:absolute;
        left:50%;
        width:fit-content;
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        font-size: 14px;
     
    }
   .pop{
            width: 21px;
            height: 21px;
            display: inline-block;
            text-align: center;
        }
        .popon{
            background-color: red;
            border-radius: 21px;
            color: #fff;
        }
        .num_left,.num_right{
            position: relative;
            text-align: center;
            width: 24px;
            height: 21px;
            color: #fff;
            font-weight: bold;
            background-color: #dddddd;
        }
        .num_left{
            float: left;
            margin-left: -45px;
        }
        .num_right{
            float: right;
            margin-right: -45px;
        }
        .numon{
            color:#999999;
            background-color: #000;                    
        }