分页div未显示

Question

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

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>