Herrsocke Herrsocke - 1 month ago 18
HTML Question

Why is this inline?

I dont understand why the divs are shown inline, if they are set to block, shouldnt the first div be on top of the second? Why are they beeing displayed next to each other instead on top of each other? Thanks for your help.



<!DOCTYPE html>
<html>

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

</style>
</head>

<body>

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

</html>




GvM GvM
Answer

<!DOCTYPE html>
<html>

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

    </style>
  </head>

  <body>

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

</html>