html - CSS : how to make entire LI box click able for pagination box

Question

如何使分页框的整个 LI 框可点击，html 和 css 部分工作正常。我能够单击带有页码的链接转到第二页。

问题是:当您点击li 框时，数字旁边的空白部分无法链接到其他页面。我希望它可以点击。

我该怎么办？

.pagination {
  margin: 0;
  padding: 0;
}

.pagination li {
  display: inline;
  padding: 6px 10px 6px 10px;
  border: 1px solid #ddd;
  margin-right: -1px;
  font: 13px/20px Arial, Helvetica, sans-serif;
  background: #FFFFFF;
}

.pagination li a {
  text-decoration: none;
  color: rgb(89, 141, 235);
}

.pagination li.first {
  border-radius: 5px 0px 0px 5px;
}

.pagination li.last {
  border-radius: 0px 5px 5px 0px;
}

.pagination li:hover {
  background: #EEE;
}

.pagination li.current {
  background: #89B3CC;
  border: 1px solid #89B3CC;
  color: #FFFFFF;
}

<ul class="pagination">
  <li class="first">
    <a href="/fs/mapping/mapping.php?page=1" title="First">«</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=-1" title="Previous">&lt;</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=1">1</a>
  </li>
  <li class="active">2</li>
  <li>
    <a href="/fs/mapping/mapping.php?page=3">3</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=4">4</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=5">&gt;</a>
  </li>
  <li class="last">
    <a href="/fs/mapping/mapping.php?page=5" title="Last">»</a>
  </li>
</ul>

JSFiddle

如有任何帮助，我们将不胜感激。

Answer 1

您可以更新这部分:

.pagination li {
      display: inline-block;
      border: 1px solid #ddd;
      margin-right: -1px;
      font: 13px/20px Arial, Helvetica, sans-serif;
      background: #FFFFFF;
    }

    .pagination li a {
      text-decoration: none;
      color: rgb(89, 141, 235);
      display:block;
      padding: 6px 10px 6px 10px;
    }

标记部分

 <li class="active"><a href="/fs/mapping/mapping.php?page=1">2</a></li>

.pagination {
  margin: 0;
  padding: 0;
}

.pagination li {
  display: inline-block;
  border: 1px solid #ddd;
  margin-right: -1px;
  font: 13px/20px Arial, Helvetica, sans-serif;
  background: #FFFFFF;
}

.pagination li a {
  text-decoration: none;
  color: rgb(89, 141, 235);
  display:block;
  padding: 6px 10px 6px 10px;
}

.pagination li.first {
  border-radius: 5px 0px 0px 5px;
}

.pagination li.last {
  border-radius: 0px 5px 5px 0px;
}

.pagination li:hover {
  background: #EEE;
}

.pagination li.current {
  background: #89B3CC;
  border: 1px solid #89B3CC;
  color: #FFFFFF;
}

<ul class="pagination">
  <li class="first">
    <a href="/fs/mapping/mapping.php?page=1" title="First">«</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=-1" title="Previous">&lt;</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=1">1</a>
  </li>
  <li class="active"><a href="/fs/mapping/mapping.php?page=1">2</a></li>
  <li>
    <a href="/fs/mapping/mapping.php?page=3">3</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=4">4</a>
  </li>
  <li>
    <a href="/fs/mapping/mapping.php?page=5">&gt;</a>
  </li>
  <li class="last">
    <a href="/fs/mapping/mapping.php?page=5" title="Last">»</a>
  </li>
</ul>