html - 如何在水平居中元素的左侧或右侧 float 元素？

Question

对于分页，我想使用水平对齐的元素，如下所示:

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

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

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

float 元素应始终直接附加到中心元素。

我的方法如下所示(搜索结果表的最后一行):

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

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

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

Answer 1

HTML 表格

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

JSFiddle Demo

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

要点:

• 使用包含 3 列的表格。给中间的列一个小的固定宽度，不要为左右列指定宽度。中间列将根据需要扩展以适合其内容，任何剩余空间将在左右列之间平均分配。
• 在左列和右列中添加一个包装元素。给 wrapper 一个固定的宽度，该宽度足够大以适应它曾经拥有的最大数量的内容(但也适合支持的最小屏幕尺寸)。 wrapper 必须具有相同的宽度，否则中间列不会居中。
• 将左列向右对齐，将右列向左对齐(因此两者都向中间对齐)。
• 将左侧包装的内容向右对齐，将右侧包装的内容向左对齐(因此两者的内容向中间对齐)。
• 将居中的 page X of N 链接放在中间列中。
• 将显示在 第 X 页，共 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;
}