Styling Pagination Links

Question

J'ai du mal à appliquer des CSS à certains liens de pagination. Je voudrais les liens pour montrer horizontalement au bas de la page, Centré:

         1 2 3 > >> 

En ce moment, avec le CSS, ils montrent verticalement, centrée, et près du haut de la page:

          1 
              2 
              3 
              > 
              >> 

Quel type de CSS puis-je appliquer à la classe "pages" afin d'afficher ces liens comme je le souhaite?

Merci à l'avance,

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 

Le 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

Deux choses:

1. Vous devez mettre une référence entité pour l'ancre texte. Cela signifie > au lieu de >; et
2. Vous pouvez mettre les liens dans une rangée de plusieurs façons, y compris en les rendant display: inline ou si vous voulez plus de contrôle sur les marges, utilisez float: left bien que cela aura d'autres effets sur votre mise en page.

Par exemple, ceci est le genre de navigation, vous devriez viser:

<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> 

avec:

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

Le code HTML est minime et au point. Préférez faire des ancres (<a>) display: block au lieu de les mettre dans un <div> parce que de cette façon, ils seront cliquables n'importe où dans la boîte, pas seulement sur le texte du nombre/symbole. Les zones cibles plus grandes sont meilleures.