html分页组件的单文件实现ul.pager li { display: inline; }

<!DOCTYPE html>
<html lang="cn-ZH">

<head>
    <style>
        ul.pager li {
            display: inline;
        }

        ul.pager {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pager li a {
            color: #000;
            /* 字体颜色 */
            background-color: #fff;
            /* 背景颜色 */
            float: left;
            /* 从左向右浮动 */
            padding: 12px 18px;
            /* 内边距 */
            margin: 9px;
            /* 外边距 */
            text-decoration: none;
            /* 清除文字修饰 */
            border-radius: 6.5px;
            /* 圆角 */
            transition: background-color .3s;
            /* 动画变换时间 */
        }

        ul.pager li a:hover:not(.active) {
            background-color: #cdcdcd;
        }

        ul.pager li a.active {
            background-color: #4E6EF2;
            color: white;
            border: 1px solid #4E6EF2;
        }

        .bk {
            height: 66px;
            width: 900px;
            background-color: #F5F5F6;
            margin: 0 auto;
            text-align: center;
        }
    </style>


</head>

<body>
    <div class="bk">
        <ul class="pager">
            <li><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" 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><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="#">下一页></a></li>
        </ul>
    </div>
</body>

</html>
直接运行得到：