I am making a pagination system for my search page and currently have something that looks like this:
.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>I put min-width on the number elements to make the border have the same size for single and double digit numbers which works as expected.
Problem
When I have a "small" 3-digit number like 111 it takes up less space than a larger one like 888. The difference is subtle in the fiddle, it is much larger with my current font. Image for reference with my font:
What I want
I want the boxes of each 3 digit number to be the same size. Not the same size as the single and 2 digit ones, it can be larger. So the sizes for each 1 and 2 digit numbers are as the min width, say 16px. Then all 3 digit numbers should have the same width of the box, say 24px. And each 4 digit number should have 32px etc.
What I tried
I have tried to apply the attribute monospace to the font family with no help, I guess it is because my font is simply not monospaced. I solved it with Javascript by when I click on a page it will check the page numbers and apply a different min-width to each element depending on the size of the number. This feels a bit overkill though.
If it's of any help I use bootstrap 3 as framework, but the problem applies without it too.
Is there a way to solve this with HTML/CSS without JS or without changing to monospaced font?
