Question

我正在尝试显示结果的页码。当我在开发人员工具中看到我的div时，他们都获得了价值。但它没有在实际的UI中显示。我希望在底部和页面以及固定位置显示。

HTML：

$(".pagination").Paginate_Custom({
            itemToPaginate : ".results"
        });

CSS：

.pagination {
    background-color: #C8FAC3;
    padding-left: 10px;
    width:100px;
    margin:0px auto;
    position: fixed;
}

.pagination li{
    float:center;
    width: 20px;
    height: 20px;
    border: 1px solid #C8FAC3;
    background-color: #C8FAC3;
    color:white;    
    display: inline-block;
    cursor: pointer;
    color:black;
}

.pagination ul{
    border: 0px;
    padding: 0px;
    text-align: center;

}

.pagination li:hover{
    background-color:white;
    border: 1px solid black;
    color:black;
}

Answer 1

删除

width: 20px;
height: 20px;

并添加此

.pagination li{
    float:center;

    border: 1px solid #C8FAC3;
    background-color: #C8FAC3;
    color:white;    
    display: inline-block;
    cursor: pointer;
    color:black;
}

例如

.pagination {
    background-color: #C8FAC3;
    padding-left: 10px;
    width:100px;
    margin:0px auto;
    position: fixed;
}

.pagination li{
    float:center;
   
    border: 1px solid #C8FAC3;
    background-color: #C8FAC3;
    color:white;    
    display: inline-block;
    cursor: pointer;
    color:black;
}

.pagination ul{
    border: 0px;
    padding: 0px;
    text-align: center;

}

.pagination li:hover{
    background-color:white;
    border: 1px solid black;
    color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

分页div没有显示

1 个答案: