【问题标题】:Pagination - Removing a large space between bottom of rows and pagination links分页 - 删除行底部和分页链接之间的大空间
【发布时间】:2009-11-27 02:25:19
【问题描述】:

下面的分页效果很好。它将表拆分为每页 25 行。但是,当我单击第一页以外的页面时,25 行的底部和分页链接之间有很大的空间。我认为问题与CSS有关。我怎样才能摆脱这么大的空间?

提前致谢,

约翰

/******  build the pagination links ******/  
// range of num links to show    

// if not on page 1, don't show back links  
if ($currentpage > 1) {  
   // show << link to go back to page 1  
   echo " <div class='pages'><div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=1&find={$_SESSION['find']}&searching=yes&search=search' class='links'><<</a></div> ";  
   // get previous page num  
   $prevpage = $currentpage - 1;  
   // show < link to go back to 1 page  
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage&find={$_SESSION['find']}&searching=yes&search=search' class='links'><</a></div> ";  
} // end if   

// loop to show links to range of pages around current page  
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {  
   // if it's a valid page number...  
   if (($x > 0) && ($x <= $totalpages)) {  
      // if we're on current page...  
      if ($x == $currentpage) {  
         // 'highlight' it but don't make a link  
         echo " <div class='pages'>[<b>$x</b>] </div>";  
      // if not current page...  
      } else {  
         // make it a link  
     echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$x&find={$_SESSION['find']}&searching=yes&search=search' class='links'>$x</a></div> ";  
      } // end else  
   } // end if   
} // end for  

// if not on last page, show forward and last page links      
if ($currentpage != $totalpages) {   
   // get next page  
   $nextpage = $currentpage + 1;  
    // echo forward link for next page   
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage&find={$_SESSION['find']}&searching=yes&search=search' class='links'>></a></div> ";  
   // echo forward link for lastpage  
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}&searching=yes&search=search' class='links'>>></a></div> ";  
} // end if  
/****** end build pagination links ******/

如果有帮助,下面是分页链接生成的 HTML 的外观:

</table> 
 <div class='pages'><div class='pages'><a href='/booksearch.php?currentpage=1&find=best book ever&searching=yes&search=search' class='links'><<</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=1&find=best book ever&searching=yes&search=search' class='links'><</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=1&find=best book ever&searching=yes&search=search' class='links'>1</a></div>  <div class='pages'>[<b>2</b>] </div> <div class='pages'><a href='/booksearch.php?currentpage=3&find=best book ever&searching=yes&search=search' class='links'>3</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=4&find=best book ever&searching=yes&search=search' class='links'>4</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=5&find=best book ever&searching=yes&search=search' class='links'>5</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=3&find=best book ever&searching=yes&search=search' class='links'>></a></div>  <div class='pages'><a href='/booksearch.php?currentpage=7&find=best book ever&searching=yes&search=search' class='links'>>></a></div>

相关的 CSS:

.pages
    {
    overflow: hidden;
    display: block;
    float: left;
    margin: 4px;
    margin-top: 940px;
    margin-left: 10px;
    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;
    }

 a.links:visited {
    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;
    }

 a.links:active {
    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;
    }

 a.links:hover {
    color: #000000; text-decoration: none; 
    background-color: #FFFF00;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

【问题讨论】:

  • 你能发布一个实时链接或者至少是生成的 HTML 吗?从原始的巨大 PHP 脚本中猜测渲染的 HTML 输出有点困难。
  • 我为链接添加了生成的 HTML。
  • 实际上,我认为我的问题可能出在我正在使用的 CSS 上。我想我会编辑这个问题。

标签: php css


【解决方案1】:

您必须将“>>”更改为正确的 html 实体:“<<<”和“>>>”。您的 HTML 已损坏。

例如,这一行:

echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}&searching=yes&search=search' class='links'>>></a></div> ";

应该是:

echo " <div class='pages><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&amp;find={$_SESSION['find']}&amp;searching=yes&amp;search=search' class='links'>&gt;&gt;</a></div> ";

糟糕的 HTML 几乎肯定会导致意外显示。在正确形成标记之前,您无法测试潜在的间距问题。

【讨论】:

  • 为什么使用“
  • 如果您的 HTML 格式不正确(使用“
【解决方案2】:

我在您的分页示例中看到了这一点:

<div class='pages'>
 <div class='pages'><a href='/booksearch[/snip]

但我在您的代码中没有看到“

”是单独存在的??

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-05
    • 2015-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多