php - 格式化分页

Question

我使用代码在 WordPress 结果集的底部设置了分页；

function realestatepro_pagination($pages = '', $range = 2)
{
    $showitems = ($range * 2)+1;

    global $paged;
    if(empty($paged)) $paged = 1;

    if($pages == '')
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages)
        {
            $pages = 1;
        }
    }

    if(1 != $pages)
    {
        echo "<ul class='paginate-links'>";
//        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
        if($paged != 1) echo "<li><a href='".get_pagenum_link($paged-1)."'>Previous</a></li>";
        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                echo ($paged == $i)? "<li class='active' ><a href='".$i."' >".$i."</a></li>":"<li><a href='".get_pagenum_link($i)."' >".$i."</a></li>";
            }
        }
        if($paged != $pages) echo "<li><a href='".get_pagenum_link($paged+1)."'>Next</a></li>";
//        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
        echo "</ul>\n";
    }
}

我正在使用以下 CSS 来设置编号样式

.paginate-links li {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 2px 0 0;
	border: 1px solid #e0e0de;
	line-height: 1;
	text-decoration: none!important;
}

.paginate-links li.active a {
	margin: 0px;
	padding: 0px;
	color: #ffffff;
	background: #3399FF;
}

.paginate-links li.active a:hover {
	text-decoration: none;
}

<div class="col-xs-12 col-sm-12 col-md-12">
    <hr>
    <ul class='paginate-links'>
        <li class='active' ><a href='1' >1</a></li>
        <li><a href='LINK TO PAGE 2>2</a></li>
        <li><a href='LINK TO NEXT PAGE>Next</a></li>
    </ul>
</div>

然而，事件页面的背景只影响数字后面的区域，而不影响整个框。我曾尝试使用绝对像素高度和宽度，但无济于事。当页码悬停时，我似乎也无法删除文本下划线。我看不出哪里错了。

Answer 1

我改变了看法。

我已将填充样式从仅事件链接移动到所有链接，并将 display: block; 添加到超链接。

关于在 anchor 标记上删除 text-decoration 即

.paginate-links li.active a:hover {
    text-decoration: none;
}

您实际上必须将鼠标悬停在宽度小于列表项的 anchor 元素上

一个解决方案是在列表项上添加悬停样式:

.paginate-links li:hover a {
  text-decoration: none;
}

然而，这将删除每个分页元素(包括非事件元素)的下划线。如果您只想将事件元素的 text-decoration 移除，那么这将起作用:

.paginate-links li.active:hover a{
    text-decoration: none;
}

完整示例

.paginate-links li {
  display: inline-block;
  margin: 0 2px 0 0;
  border: 1px solid #e0e0de;
  line-height: 1;
  text-decoration: none!important;
}
.paginate-links li a {
  padding: 5px 10px;
  margin: 0px;
  display: block;
}
.paginate-links li.active a {
  color: #ffffff;
  background: #3399FF;
}
.paginate-links li:hover a {
  text-decoration: none;
}

<div class="col-xs-12 col-sm-12 col-md-12">
  <hr>
  <ul class='paginate-links'>
    <li class='active'><a href='1'>1</a>
    </li>
    <li><a href='LINK TO PAGE 2'>2</a>
    </li>
    <li><a href='LINK TO NEXT PAGE'>Next</a>
    </li>
  </ul>
</div>