Стилизация ссылок на страницы

Question

Мне трудно применить CSS к некоторым ссылкам на страницы. Я бы хотел, чтобы ссылки отображались горизонтально внизу страницы по центру:

                                        1 2 3 > >>

Прямо сейчас с помощью CSS они отображаются вертикально, по центру и в верхней части страницы:

                                           1
                                           2
                                           3
                                           >
                                           >>

Какой тип CSS я могу применить к классу "pages", чтобы эти ссылки отображались так, как мне хотелось бы?

Заранее спасибо,

John

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>, потому что таким образом они будут нажиматься в любом месте внутри поля, а не только на тексте числа / символа. Чем больше цель, тем лучше.