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

给每个链接一个固定的宽度。( JSFiddle ) 假设您没有任何高于 999 的页面，请将每个链接的宽度设置为其中的 3 位数字。我会通过将链接设为块级元素、指定宽度并将其居中来使用 CSS 来实现 - 尽管您可能希望它右/左对齐。如果你支持较新的浏览器，你可以这样做inline-block，但如果不支持，你可以设置display:block然后float:left：

a {
  display: inline-block;
  width: 1.5em;
  text-align:center;
}

Answer 3

您需要将每个页码/第一个/上一个/下一个/最后一个的宽度指定为最坏情况值。如果未设置，它将在数字从一位数变为两位数 (5->55) 时动态更改（变宽）