对于分页,我想使用水平对齐的元素,如下所示:
|<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) -->|
最佳答案
HTML 表格
基本上,使用具有 3 列的表格。向左列和右列添加一个固定宽度的包装器,并与中间列对齐。
该演示展示了各种分页条,在 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;
}
关于html - 如何在水平居中元素的左侧或右侧 float 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17134067/