フォントを変更せずにフォントの横幅を固定にする方法

Question

以下のようなHTMLを作成して、四角で囲うリストを作成しました。

<ul class="list-inline text-light my-0 mr-2 small">
  <li class="list-inline-item border px-1 text-dark bg-white"><a>1</a></li>
  <li class="list-inline-item border px-1 text-dark bg-white"><a>2</a></li>
  <li class="list-inline-item border px-1 text-dark bg-white"><a>3</a></li>
  <li class="list-inline-item border px-1 text-dark bg-white"><a>4</a></li>
</ul>

これで表示すると1と4で横幅が違うので、囲いの大きさがそれぞれバラバラになります。
なのでCSSでここに対して等倍フォントを設定すれば良いと思いセットしました。

font-family: 'Courier New', Consolas, monospace;

綺麗にはなりましたが、当然ですがフォントを変更したので表示が変わってしまいました。
フォントを変更せずに囲いの大きさを固定で綺麗に表示させる方法は無いでしょうか？

Comments

[x_x]

もとのフォントの指定はどうなっているのでしょうか？
'Segoe UI' の 数字1と4は幅が同じように見えます

[maisumakun]

元のCSSはどのようなものを適用していますでしょうか？

Answer 1

囲いの大きさを固定で綺麗に表示させる方法は無いでしょうか？

幅を指定してしまえばよいのでは？

#ex a {
  width: 1em;
  text-align: center;
  display: inline-block;
}
```**動くサンプル：**[https://jsfiddle.net/0a3fe8mx/1/](https://jsfiddle.net/0a3fe8mx/1/)