Question

我不明白为什么div显示为内联，如果它们被设置为阻止，第一个div不应该在第二个顶部？为什么它们彼此相邻而不是彼此叠加？谢谢你的帮助。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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>

为什么这个内联？

1 个答案: