如何在html中的两个日期之间添加连字符，并在空格之间均匀地添加空格

Question

在旅行日期之间，我想添加一个连字符，然后将它们均匀地散布在整个宽度上，但是我无法使其正常工作。我想证明“输入目的地”是合理的。我该怎么做，并在开始日期和结束日期之间添加连字符，以便扩展页面的整个宽度？

    <ion-label>Destination</ion-label>
<ion-item>
    <input [(ngModel)]="destination" placeholder="Enter destination" 
#destin>
</ion-item>
<ion-label>Trip dates</ion-label>
<ion-item flex>
  <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="startDate"> . 
 </ion-datetime>
    <p class="hyphen">--</p>
  <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="endDate"></ion- 
  datetime>
</ion-item>

CSS

        .hyphen{
        display: flex;
        width: 100px;
        height: 24px;
        font-family: Gotham;
        font-size: 24px;
        align-items: flex-start;
        align-content: center;
        flex: auto;
    }

    .flex {
        display: flex;
        justify-content: space-between
    }

Answer 1

我想相信你可以做这样的事情：

<div>
    <p style="display: inline-block; float: left;">12/23/2019</p>
    <p class="hyphen" style="display: inline-block;">--</p>
    <p style="display: inline-block; float: right;">12/23/2020</p>
  </div>

注意：这只是一个示例，请准确记录样式，谢谢。