html中字符之间的间距相等答案

【问题标题】：Equal spacing between characters in htmlhtml中字符之间的间距相等
【发布时间】：2023-01-18 17:58:54
【问题描述】：

我正在为我的搜索页面制作一个分页系统，目前看起来像这样：

.pagination-wrapper{
  display: flex;
  justify-content: center;
  padding-top: 50px;
}
.number{
  border: thin solid rgb(80 80 80);
  padding: 0.2rem 0.3rem 0.2rem 0.3rem;
  text-align: center;
  margin: 0 0.2rem;

  min-width: 1rem;
}

<div class="pagination-wrapper">
    <span class="number">1</span> 
    <span class="number">56</span> 
  <span class="number">111</span> 
  <span class="number">888</span> 
</div>

我将 min-width 放在数字元素上，使边框对于单位和双位数具有相同的大小，这按预期工作。

问题

当我有一个像 111 这样的“小”三位数号码时，它比像 888 这样的大号码占用更少的空间。小提琴中的区别很小，我当前的字体要大得多。我的字体参考图片：

我想要的是

我希望每个 3 位数字的框大小相同。跟个位数和2位的大小不一样，可以大一些。因此，每个 1 位和 2 位数字的大小都是最小宽度，比如 16px。然后所有 3 位数字的框宽度应该相同，比如 24px。每个 4 位数字应该有 32px 等。

我试过的

我试图在没有帮助的情况下将属性 monospace 应用于字体系列，我想这是因为我的字体根本不是等宽的。我用 Javascript 解决了这个问题，当我点击一个页面时，它会检查页码并根据数字的大小对每个元素应用不同的最小宽度。不过，这感觉有点矫枉过正。

如果它有任何帮助，我使用 bootstrap 3 作为框架，但没有它问题也适用。

有没有办法用没有 JS 或不更改为等宽字体的 HTML/CSS 来解决这个问题？

【问题讨论】：

我怀疑是否存在不更改为 monospace 字体的简单解决方案，因为 its width 中的每个字母在本质上都是不同的。如果它仅用于页脚分页并且保持宽度一致对您来说至关重要，我建议您考虑使用类似视觉质量的等宽字体，如Roboto Mono
@BumhanYu，这也是我的想法，只是问我是否遗漏了一些解决方案。谢谢：）
我看到的唯一方法是使用 JavaScript 检查长度，然后设置一个类

标签： html css twitter-bootstrap-3

【解决方案1】：

这里提出的解决方案是将每个字符插入到其自己的固定宽度范围内： How to imitate a monospace font with a variable-width font?

【讨论】：

【解决方案2】：

尝试将 font-kerning: none; 添加到数字类。

.pagination-wrapper
.pagination-wrapper-test, {
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.pagination-wrapper .number,
.pagination-wrapper-test .number {
  border: thin solid rgb(80 80 80);
  padding: 0.2rem 0.3rem 0.2rem 0.3rem;
  text-align: center;
  margin: 0 0.2rem;
  min-width: 1rem;
}

.pagination-wrapper-test .number {
  font-kerning: none;
}

<div class="pagination-wrapper">
  <span class="number">1</span>
  <span class="number">8</span>
  <span class="number">11</span>
  <span class="number">88</span>
  <span class="number">111</span>
  <span class="number">888</span>
  <span class="number">1111</span>
  <span class="number">8888</span>
</div>

<br>

<div class="pagination-wrapper-test">
  <span class="number">1</span>
  <span class="number">8</span>
  <span class="number">11</span>
  <span class="number">88</span>
  <span class="number">111</span>
  <span class="number">888</span>
  <span class="number">1111</span>
  <span class="number">8888</span>
</div>

【讨论】：