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;添加到超链接。

至于在锚标记上删除text-decoration，即

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

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

的锚元素上

解决方法是在列表项上添加悬停样式：

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

格式化分页

1 个答案: