Html 强制一组动态链接保持静止？

我有一组用于分页的链接，如下所示：

当您浏览页面时，链接会根据您所在的页面而变化。这会改变它们所占的总宽度，并导致它们到处移动，从而使它作为一个方便的分页工具变得非常无效

下面是一个示例，说明了当您深入时，它们的宽度：

---

我需要的是使这些链接保持其位置，使其容器保持其宽度。我不是CSS专家，但如果有人能帮助我，我将不胜感激。

给每个链接一个固定的宽度。（）假设没有高于999的页面，请将每个链接的宽度设置为其中的3位数字。我会使用CSS将链接设置为块级元素，指定宽度，并将其居中——尽管您可能希望它是右/左对齐的。如果您支持较新的浏览器，则可以执行

内联块

，但如果不支持，则可以设置

显示：块

，然后设置

浮动：左

：

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

---

给每个链接一个固定的宽度。（）假设没有高于999的页面，请将每个链接的宽度设置为其中的3位数字。我会使用CSS将链接设置为块级元素，指定宽度，并将其居中——尽管您可能希望它是右/左对齐的。如果您支持较新的浏览器，则可以执行

内联块

，但如果不支持，则可以设置

显示：块

，然后设置

浮动：左

：

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

---

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

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

尝试以下操作：

.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%;
}

-

---

本质上，

.line

类的行为类似于

元素（但语义上并非如此），而

.unit

类的行为类似于

元素。这个或类似的东西应该给你你想要的布局，并保持每个“单元”以及整个线条的宽度一致。

试试这样的东西：

.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%;
}

-

---

本质上，

.line

类的行为类似于

元素（但语义上并非如此），而

.unit

类的行为类似于

元素。这个或类似的东西应该给你想要的布局，并保持每个“单元”以及整个线条的宽度一致。

这绝对是最简单的答案。它几乎完全符合我的需要，没有任何调整，所以只要几次小润色，我就可以开始了。非常感谢！这似乎是解决方案，但是当数字长度增加时，链接仍然会移动一点点。我可以根据链接的长度将类应用于链接，但我不确定根据其长度将每个类设置为多宽。有什么想法吗？嗯，他们不应该动。。。你能提供一个到你的站点的链接或者把你的代码复制到一个JSFIDLE中吗？您还可以尝试TestSubject528491的解决方案，如果您不需要在宽度改变时将链接列表换行，这是一个非常好的方法。这绝对是最简单的答案。它几乎完全符合我的需要，没有任何调整，所以只要几次小润色，我就可以开始了。非常感谢！这似乎是解决方案，但是当数字长度增加时，链接仍然会移动一点点。我可以根据链接的长度将类应用于链接，但我不确定根据其长度将每个类设置为多宽。有什么想法吗？嗯，他们不应该动。。。你能提供一个到你的站点的链接或者把你的代码复制到一个JSFIDLE中吗？您还可以尝试TestSubject528491的解决方案，如果您不需要在宽度改变时将链接列表换行，这是一个非常好的方法。这是一个很棒的解决方案。美好的看起来这是假设总有10个页面链接和4个下一个/最后一个链接，因此

5%

单元格加起来是50%，而

12.5%

单元格加起来是50%。这应该很容易用计算器调整。为什么

.line

设置为60%？@brentonstrine我刚刚为链接组选择了一个美观的宽度。我觉得100%太大了。事实上，我的答案只是一个模板，OP可以自由修改以满足其需求。谢谢你的积极反馈！我要试一试。不幸的是，我的网站还不支持HTML5，所以

对我不起作用。。。还有其他想法吗？另外，如果没有

，我的链接会出现在页面下方，而不是在指定的

中。你觉得我能让它工作吗？这是一个很棒的解决方案。美好的看起来这是假设总有10个页面链接和4个下一个/最后一个链接，因此

5%

单元格加起来是50%，而

12.5%

单元格加起来是50%。这应该很容易用计算器调整。为什么

.line

设置为60%？@brentonstrine我刚刚为链接组选择了一个美观的宽度。我觉得100%太大了。事实上，我的答案只是一个模板，OP可以自由修改以满足其需求。谢谢你的积极反馈！我要试一试。不幸的是，我的网站还不支持HTML5，所以

对我不起作用。。。还有其他想法吗？另外，如果没有

，我的链接会出现在页面下方，而不是在指定的

中。你觉得我能让它工作吗？