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

0

position:absolute を左と右の % で col1、2、4、および 5 に試してみてください。

于 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 に答える