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

Question

我正在做一个 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;
    }
   }
  }

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字体，我只是在演示中使用了浏览器的默认值。