为什么这是内联的？

Question

我不明白为什么 div 显示为内联，如果它们设置为块，第一个 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>

为什么这是内联的？

Why is this inline?

html

css

display