如何在html中的两个日期之间添加连字符和均匀间隔?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (189)

在旅行日期之间,我想添加一个连字符,然后将整个宽度均匀地展开,但我无法让它工作。我想留下一个“输入目的地”。我该如何做到这一点,并在开始日期和完成日期之间添加一个连字符,这样它就可以扩展页面的整个宽度。

    <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
    }
提问于
用户回答回答于

我想相信你能做这样的事:

<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>

扫码关注云+社区

领取腾讯云代金券