2017-10-09 15 views
0

私の結果にページ番号を表示しようとしています。開発ツールで私の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; 
} 

答えて

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>

+0

さて。また、ユーザーが検索フィールドに送信ボタンを押したときに表示させる方法もあります。 – ilovejava

関連する問題