Question

我很难将CSS应用于某些分页链接。我希望链接在页面底部水平显示，居中：

                                        1 2 3 > >>

现在使用CSS，它们会垂直显示，居中显示并靠近页面顶部：

我可以将哪种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

两件事：

您需要为锚文本添加实体引用。这意味着>而不是>;和
您可以通过多种方式将链接放在一行，包括制作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>中，因为这样它们可以在框中的任何位置点击，而不仅仅是数字/符号文本。更大的目标区域更好。

造型分页链接

1 个答案: