스타일링 매김

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>는) 대신 <div> 때문에이 방식으로 퍼팅의 그들은 단지 숫자/기호 텍스트의 아무 곳이나 상자에서 클릭 할 수 display: block. 더 큰 목표 영역이 더 좋습니다.