Question

我从服务器获得了一个很长的列表，我想在一个表的行中显示列表的每个元素：

<table class="list-content">
   <!-- 1st element-->
   <tr id="elem_1">
      <td>... </td>
      <td>... </td>
   </tr>

   <!-- 2nd element-->
   <tr id="elem_2">
      <td>... </td>
      <td>... </td>
   </tr>    

   <!-- 3rd element-->
   <tr id="elem_2">
      <td>... </td>
      <td>... </td>
   </tr>

   ...
   ...
   <!-- n-th element-->
   <tr id="elem_n">
      <td>... </td>
      <td>... </td>
   </tr>
</table>

由于列表很大，我希望在表下有一个列表分页，每个页面只显示10个元素：

<table class="list-content">

   <!-- SHOW 10 elements here -->

</table>
<div id="page-idx">

    <!-- list page number shows here -->
    <ul><li>1</li><li>2</li></ul>...

</div>

我的疑问：

1。对于列表分页（page-idx），我打算对每个页码使用无序li，但它会垂直显示页码，如何更改它以显示页码水平？

2. 并且页面数量是根据服务器返回的元素数量动态计算的，如何使用jQuery更新分页号码？（那是在html中，<ul>是空的，jquery更新页面数量）

Answer 1

为何浮动？这是一个非常糟糕的主意。您只需使用css水平设置列表样式即可。

#page-idx li{
    list-style:none;
    display:inline;
}

以下是一个示例：http://jsfiddle.net/8qcWT/

Answer 2

在你的css中：li{ float:left;}这会将所有li水平放置

Answer 3

将一些样式应用于分页html：

#page-idx ul li { float:left; }
#page-idx ul li a { padding:3px; text-decoration:none; }

http://jsfiddle.net/SUqzs/2/

Answer 4

li{display:inline; margin: 0px 5px;}这会将所有li水平放置，而不会破坏任何页面布局。

Answer 5

要获取水平页码，请尝试以下操作：

li { list-style: none; display: inline; float: left;}

看看是否可以，然后你可以设计它以适应它。

至于更新页码，请使用最初在函数内部执行的jquery代码，每当您单击另一个页码时，调用该函数再次更新页面编号。

如果没有看到您用于分页的代码，那么很难提供帮助。

一个简单的问题：什么html元素应该用作列表分页？

5 个答案: