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

Question

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

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

是否有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;
    }
   }
  }

Answer 1

就像其他人说的那样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>

Answer 2

也许letter-spacing可以帮助您。我不确定是否可以通过这种方式获得像素完美的效果，但是此属性可能有用。

Answer 3

问题与您在这些日期使用的Poppins字体有关。字体不是等宽的（仅无衬线）。

如果使用常规的monospace字体，则不再出现该问题

请参见下面的演示

.co-operations-contrat__date a {
  margin-right: 5px;
  display: inline-block;
  cursor: pointer;
}

.co-operations-contrat__date .co-operations-contrat__date-text {
  margin-left: 0;
}

.co-operations-contrat__date-text {
  margin-left: 25px;
  font-family: "Poppins", monospace;
}

#no-poppins .co-operations-contrat__date-text {
  margin-left: 25px;
  font-family: monospace;
}

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
  <span class="co-operations-contrat__date-text">30/06/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/03/2018</span><br/>
  <span class="co-operations-contrat__date-text">04/07/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>

<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
  <span class="co-operations-contrat__date-text">30/06/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/03/2018</span><br/>
  <span class="co-operations-contrat__date-text">04/07/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>

<h1>Other workarounds include </h1>

<h2>Usign &lt;TT&gt;</h2>
<div class="co-operations-contrat__date">
  <tt>30/06/2018</tt><br/>
  <tt>31/03/2018</tt><br/>
  <tt>04/07/2018</tt><br/>
  <tt>31/01/2011</tt><br/>
</div>

<h2>Using &lt;PRE&gt;</h2>
<div class="co-operations-contrat__date">
  <span>30/06/2018</pre>
  <pre>31/03/2018</pre>
  <pre>04/07/2018</pre>
  <pre>31/01/2011</pre>
</div>

当然，您可以选择任何一种monospaced字体，我只是浏览了该示例的浏览器默认值。