造型分頁鏈接

Question

我很難將CSS應用於某些分頁鏈接。我想鏈接到頁面的底部水平顯示，居中：

         1 2 3 > >> 

眼下與CSS，他們表現出垂直，居中，和靠近頁面的頂部：

          1 
              2 
              3 
              > 
              >> 

我可以將什麼樣的CSS應用到「網頁」類，以便按照我的意願顯示這些鏈接？

由於提前，

約翰

if ($currentpage > 1) { 
    echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=1&find={$_SESSION['find']}' class='links'><<</a></div> "; 
    $prevpage = $currentpage - 1; 
    echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage&find={$_SESSION['find']}' class='links'><</a></div> "; 
} // end if 

for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) { 
    if (($x > 0) && ($x <= $totalpages)) { 
     if ($x == $currentpage) { 
     echo " <div class='pages'>[<b>$x</b>] </div>"; 
     } else { 
    echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$x&find={$_SESSION['find']}' class='links'>$x</a></div> "; 
     } // end else 
    } // end if 
} // end for 

if ($currentpage != $totalpages) {  
    $nextpage = $currentpage + 1;  
    echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage&find={$_SESSION['find']}' class='links'>></a></div> "; 
    echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}' class='links'>>></a></div> "; 
} // end if 

的CSS：

.pages 
    { 
    text-align: center; 
    margin-top: 10px; 
    margin-bottom:0px; 
    padding:0px; 
    font-family: Arial, Helvetica, sans-serif ; 
    } 

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

Answer 1

兩件事情：

1. 你需要把一個實體引用在錨文本。這意味着>而不是>;和
2. 您可以用多種方式將鏈接放在一行中，包括使其成爲display: inline，或者如果您希望更多地控制邊距，請使用float: left，儘管這會對您的佈局產生其他影響。

例如，這是哪門子的導航，你應該瞄準：

<div id="nav"> 
    <a href="page1">1</a> 
    <a href="page2">2</a> 
    <a href="page3">3</a> 
    <a href="pagenext">&gt;</a> 
    <a href="pagelast">&gt;&gt;</a> 
</div> 

有：

#nav { overflow: hidden; } 
#nav a { display: block; float: left; margin: 4px 8px; } 
#nav a:hover { background: #CCC; color: white; } 

的HTML是最小的，給點意見。喜歡製作錨點（<a>）display: block而不是將它們放在<div>中，因爲這樣它們可以在框中的任何位置點擊，而不僅僅是在數字/符號文本中。較大的目標區域更好。