3

对于分页，我想使用如下元素的水平对齐方式：

|<first page> | <previous page> | page X of N | <next page> | <last page>|

即使缺少其他元素之一，该元素page X of N也应始终位于整行的中间。例如

|<first page> | <previous page> | page N of N                            |

浮动元素应始终直接连接到中心的元素。

我的方法如下所示（搜索结果表的最后一行）：

<tr colspan="4"><td class="pager">
    <ul style="margin:0;">
        <li style="display:inline-block; float:left;">  outer left  </li>
        <li style="display:inline-block; float:left;">  inner left  </li>
        <li style="display:inline-block; float:none; text-align:center; position:absolute; left:50%; width:100px; margin-left:-50px;">  always centred  </li>
        <li style="display:inline-block; float:right;">  outer right  </li>
        <li style="display:inline-block; float:right;">  inner right  </li>
    </ul>
</td></tr>

但结果看起来像这样，即浮动元素没有“附加”到居中元素：

|<first page> | <previous page> |          page X of N            | <next page> | <last page>|
|<-- (left border)                                                         (right border) -->|
4

5 回答 5

4

HTML 表格

基本上，使用一个有 3 列的表。向左右列添加一个固定宽度的包装器，与中间列对齐。

JSFiddle 演示

该演示显示了各种分页栏，链接的左侧和右侧有平衡和不平衡的page X of N链接。为了让正在发生的事情更加明显，背景颜色已添加到不同的元素中。

关键点：

  • 使用具有 3 列的表格。给中间列一个小的固定宽度，不要为左右列指定宽度。中间列将根据需要展开以适应其内容，并且任何剩余空间将在左右列之间平均分配。
  • 在左右列内添加一个包装器元素。给包装器一个足够大的固定宽度，以容纳它曾经拥有的最大量的内容（但也将适合支持的最小屏幕尺寸）。包装器必须具有相同的宽度，否则中间列不会居中。
  • 将左列向右对齐，将右列向左对齐（因此两者都向中间对齐）。
  • 将左包装器的内容向右对齐，将右包装器的内容向左对齐（因此两者的内容都向中间对齐）。
  • 将居中的page X of N链接放在中间列中。
  • 将出现在左侧的任何链接放置page X of N在左列内容包装器中，同样将出现在右侧的任何链接放置在右列内容包装器中。

HTML

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
                <span>left</span>
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
                <span>right</span>
            </div>
        </td>
    </tr>
</table>

CSS

.pagination {
    width: 100%;
}

.pagination .column1 {
    text-align: right;
}
.pagination .column2 {
    width: 1px;
}
.pagination .column3 {
    text-align: left;
}

.pagination .content {
    display: inline-block;
    width: 200px;
}
.pagination .column1 .content {
    text-align: right;
}
.pagination .column3 .content {
    text-align: left;
}

.pagination span {
    display: inline-block;
    height: 20px;
    white-space: nowrap;
}
于 2013-06-16T16:26:27.407 回答
0

元素未附加到居中元素，因为您将它们浮动到左/右边界。据我了解，为了达到您想要的效果，您应该失去浮动并将整体居中ul。

于 2013-06-16T14:03:36.437 回答
0

不要浮动任何东西，只需将外部/父元素设置为text-align: center

像这样：

<ul style="margin:0;  text-align:center;">
        <li style="display:inline-block;">  outer left  </li>
        <li style="display:inline-block;">  inner left  </li>
        <li style="display:inline-block;">  always centred  </li>
        <li style="display:inline-block;">  outer right  </li>
        <li style="display:inline-block;">  inner right  </li>
    </ul>

小提琴：http: //jsfiddle.net/LMZsL/

于 2013-06-16T14:04:00.637 回答
0

试试 position:absolute for col1, 2, 4 and 5 with left and right % ？

于 2013-06-16T15:50:05.737 回答
0

我找到了另一个非常简单的解决方案：将所有内容居中并根据需要隐藏元素visibility: hidden：

<div style="text-align: center;">
    <span style="visibility: hidden;">  outer left  </span>
    <span>  inner left  </span>
    always centred
    <span>  inner right  </span>
    <span>  outer right  </span>
</div>

这导致：

|               <inner left> always centred <inner right> <outer right>   |
| <- left border                      |                   right border -> |
|                                   centre                                |
于 2013-06-18T14:20:14.263 回答