java分页按钮_分页按钮样式

里层div绝对定位，因为不知道具体按钮数量,所以整个宽度是自适应的，用绝对进行居中，外层div相对定位，控制上下距离，适用于不用页面不同高度需求，只用一次就绝对定位硬写。。。。

<

>

1

2

3

4

5

5

5

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

}