Ширина Даты не одинаковы, потому что ширина 1 и 2 разные?

Question

Я работаю над реагирующим проектом, и я перечисляю некоторые операции (объекты) в таблице, все выглядит хорошо, но клиент для чего-то, что я нашел очень странным и сложным, вот как это выглядит:

Но он не хочет, чтобы даты с датой выглядели, он хочет что-то вроде этого:

Есть ли свойство 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

Проблема связана с шрифтом 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;
}

Poppins In

  30/06/2018

  31/03/2018

  04/07/2018

  31/01/2011



Poppins Out

  30/06/2018

  31/03/2018

  04/07/2018

  31/01/2011



Other workarounds include 

Usign <TT>

  30/06/2018

  31/03/2018

  04/07/2018

  31/01/2011



Using <PRE>

  30/06/2018

31/03/2018

04/07/2018

31/01/2011

Конечно, вы можете выбрать любой monospaced шрифт по вашему выборуЯ просто использовал браузер по умолчанию для демонстрации.

Answer 3

Может быть межбуквенный интервал может помочь вам в этом.Я не уверен, что с этим можно достичь идеального результата, но это свойство может быть полезным.