Question

我遇到了下面的分页页码链接的CSS问题。什么CSS会使链接在下面具有以下属性？

从屏幕顶部开始940像素的绝对位置，从右边开始100像素。
相距10 px。

提前致谢，

约翰

/******  build the pagination links ******/  
// range of num links to show    

// if not on page 1, don't show back links  
if ($currentpage > 1) {  
   // show << link to go back to page 1  
   echo " <div class='pages'><div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=1&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'><<</a></div> ";  
   // get previous page num  
   $prevpage = $currentpage - 1;  
   // show < link to go back to 1 page  
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'><</a></div> ";  
} // end if   

// loop to show links to range of pages around current page  
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {  
   // if it's a valid page number...  
   if (($x > 0) && ($x <= $totalpages)) {  
      // if we're on current page...  
      if ($x == $currentpage) {  
         // 'highlight' it but don't make a link  
         echo " <div class='pages'>[<b>$x</b>] </div>";  
      // if not current page...  
      } else {  
         // make it a link  
     echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$x&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'>$x</a></div> ";  
      } // end else  
   } // end if   
} // end for  

// if not on last page, show forward and last page links      
if ($currentpage != $totalpages) {   
   // get next page  
   $nextpage = $currentpage + 1;  
    // echo forward link for next page   
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'>></a></div> ";  
   // echo forward link for lastpage  
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'>>></a></div> ";  
} // end if  
/****** end build pagination links ******/

CSS：

div.pages > a
{
    position: absolute;
    left: 100px;
    top: 940px;
    width:10px;
    margin-right: 10px;
}

div.pages
{
    float: left;
}   

 a.linksp:link {
    color: #000000; text-decoration: none;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

 a.linksp:visited {
    color: #000000; text-decoration: none;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

 a.linksp:active {
    color: #000000; text-decoration: none; 
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

 a.linksp:hover {
    color: #000000; text-decoration: none; 
    background-color: #FFFF00;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

Answer 1

div.pages > a
{
    position: absolute;
    left: 100px;
    top: 940px;
    margin-right: 10px;
}

如果您还没有，可能还需要添加以下内容：

div.pages
{
    float: left;
}

Answer 2

我不确定您的网页是如何构建的，因此我将提供自己的HTML作为示例。您需要绝对定位围绕页面导航的块元素。

<div class="pagination">
    <div class="page previous"><a href="?page=2">&lt; Previous Page</a>></div>
    <div class="page"><a href="?page=1">1</a></div>
    <div class="page"><a href="?page=2">2</a></div>
    <div class="page current"><a href="?page=3">3</a></div>
    <div class="page"><a href="?page=4">4</a></div>
    <div class="page next"><a href="?page=4">Next Page &gt;</a></div>
</div><!-- .pagination -->

然后是CSS：

.pagination {
    position: absolute;
    left: 100px;
    top: 940px;
}
.pagination .page {
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

您需要div.pagination，因为您无法动态绝对地将每个项目放置几个像素。

分页链接的CSS

2 个答案: