强制一组动态链接保持不变？

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

您需要指定最差情况值的每个页码/ first / prev / next / last的宽度。如果未设置，当数字从一位数字变为两位数字（5-> 55）时，它将动态变化（变宽）