html - 動的リンクのグループを静止させますか?

Question

次のように、ページングに使用されるリンクのグループがあります。

ページを移動すると、表示中のページに応じてリンクが変化します。これにより、それらが占める合計幅が変化し、場所全体に移動するため、便利なページングツールとしてはまったく効果がありません.

以下は、奥に進むにつれて幅が広がる例です。

私が必要としているのは、これらのリンクがその位置を維持し、コンテナがその幅を維持することです。私は CSS の専門家ではありませんが、誰かが私を助けてくれれば幸いです。

Answer 1

次のようなことを試してください：

.line {
    display: table;
    width: 60%;  /* width of the group of navigation links, randomly set to 60% */
    margin: auto;
    text-align: center;
}
.unit, .unit-outside {
    display: table-cell;
    width: 5%;
}
.unit-outside {
    /* 'extends' the .unit class */
    width: 12.5%;
}

-

<nav class="line">
    <!--this contains all the navigation links -->
    <a class="unit-outside" href=""> First </a>
    <a class="unit-outside" href=""> Prev </a>
    <a class="unit" href=""> 1 </a>
    <a class="unit" href=""> 2 </a>
    <a class="unit" href=""> 3 </a>
    <a class="unit" href=""> 4 </a>
    <a class="unit" href=""> 5 </a>
    <a class="unit" href=""> 6 </a>
    <a class="unit" href=""> 7 </a>
    <a class="unit" href=""> 8 </a>
    <a class="unit" href=""> &hellip; </a>
    <a class="unit" href=""> 66 </a>
    <a class="unit-outside" href=""> Next </a>
    <a class="unit-outside" href=""> Last </a>
</nav>

基本的に、.lineクラスは<table>要素のように機能し (意味的にはそうではありません)、.unitクラスは<td>要素のように機能します。これまたは同様のものは、必要なレイアウトを提供し、各「セル」と行全体を一貫した幅に保つ必要があります。

Answer 2

各ページ番号の幅/最初/前/次/最後を最悪の値まで指定する必要があります。設定されていない場合、数値が 1 桁から 2 桁 (5->55) になると動的に変化します (幅が広くなります)。