造型分页链接

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>中，因为这样它们可以在框中的任何位置点击，而不仅仅是在数字/符号文本中。较大的目标区域更好。