css - 日期宽度不一样，因为数字1和2的宽度不同吗？

我在一个React项目上工作，并且在表中列出了一些操作（对象），一切看起来都很好，但是客户端却让我觉得很奇怪又很辛苦，这是它的外观：



但这不是他想要数据表日期的样子，他想要这样的东西：



是否有CSS属性可以使之成为可能？

任何帮助将非常感激。

有太多的代码要写，但是这些部分就足够了：

HTML：

<div class="co-operations-contrat__date">
    <span class="co-operations-contrat__date-text">04/07/2018</span>
</div>

SASS：

.co-operations-contrat {
   &__date {
    a {
        margin-right: 5px;
        display: inline-block;
        cursor: pointer;
        +.co-operations-contrat__date-text {
            margin-left: 0;
        }
    }
    &-text {
        margin-left: 25px;

        font-family: "Poppins", monospace;
    }
   }
  }

最佳答案

就像其他人所说的，最好使用monospace作为日期。如果无法更改字体，是否可以包装日期的每个部分？
如果是这样，您可以做的是这样的事情；

https://jsfiddle.net/8mLwot25/3/

基本上，我在每个跨度上设置了一个宽度，并将其与父容器上的flex对齐。 （您也可以浮动每个跨度）。但是这样做可以更好地对齐项目。

这不是完美的，但它是一个解决方案。

.container {
  display: flex;
}

.container span {
  text-align: center;
  width: 20px;
}

.container span:last-child {
  width: auto;
}

<div class="container">
  <span>01</span>/
  <span>04</span>/
  <span>2019</span>
</div>
<div class="container">
  <span>01</span>/
  <span>05</span>/
  <span>2018</span>
</div>
<div class="container">
  <span>13</span>/
  <span>04</span>/
  <span>2019</span>
</div>

关于css - 日期宽度不一样，因为数字1和2的宽度不同吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54948652/