ページネーションには、次のような要素の水平方向の配置を使用したいと思います。
|<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) -->|