これはなぜインラインですか？

Question

なぜdivがインラインで表示されているのか理解できません。ブロックに設定されている場合、最初のdivは2番目のdivの上に表示されませんか？なぜ彼らは互いの上にお互いの隣に表示されていないのですか？ご協力いただきありがとうございます。

div.pagination { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div.pagination li { 
 
    display: block; 
 
} 
 
div.pagination li a { 
 
    color: black; 
 
    float: left; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
}

<h2>Simple Pagination</h2> 
 
<div class="pagination"> 
 
    <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="#">»</a></li> 
 
</div> 
 
<div class="pagination"> 
 
    <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="#">»</a></li> 
 
</div>

Answer 1

div.pagination { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div.pagination li { 
 
    display: inline-block; 
 
} 
 
div.pagination li a { 
 
    color: black; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
}

<h2>Simple Pagination</h2> 
 
<div class="pagination"> 
 
    <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="#">»</a></li> 
 
</div> 
 
<div class="pagination"> 
 
    <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="#">»</a></li> 
 
</div>