Почему это встроенное?

Question

Я не понимаю, почему divs показаны inline, если они настроены на блокировку, не должен ли первый 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>