分頁鏈接的CSS

我在下面的分頁頁碼鏈接的CSS有問題。什麼CSS會使鏈接具有以下屬性？分頁鏈接的CSS

從屏幕頂部940 px和右邊100 px的絕對位置開始。
彼此相距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; 
    }

來源

2009-11-27 John

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

您可能需要添加以下，以及如果你有沒有已經：

div.pages 
{ 
    float: left; 
}

來源

2009-11-27 05:36:15

我試過了，它使所有的分頁鏈接堆疊在一起。我希望他們彼此分開。 – John 2009-11-27 05:39:11

請務必在div.pages中設置寬度。這應該防止他們堆積在一起。另外你可能會想在最後一個div後面添加一個
，然後在你的CSS中添加：br.clear {clear：both; } – 2009-11-27 05:40:51

我增加了寬度：10px;而且他們還在堆疊在一起。 – John 2009-11-27 05:47:02

我不確定你的頁面結構如何，所以我會提供自己的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，因爲你不能動態絕對幾個像素位置上的每個項目。

來源

2009-11-27 06:39:08 donut

分頁鏈接的CSS

回答

相關問題