如何使分页框的整个 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"><</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">></a>
</li>
<li class="last">
<a href="/fs/mapping/mapping.php?page=5" title="Last">»</a>
</li>
</ul>
如有任何帮助,我们将不胜感激。
最佳答案
您可以更新这部分:
.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"><</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">></a>
</li>
<li class="last">
<a href="/fs/mapping/mapping.php?page=5" title="Last">»</a>
</li>
</ul>
关于html - CSS : how to make entire LI box click able for pagination box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43649002/