开始日期和结束日期对齐
Posted
技术标签:
【中文标题】开始日期和结束日期对齐【英文标题】：Alignment for start date and end date 【发布时间】：2021-11-12 08:42:02 【问题描述】：我从早上开始就一直在尝试正确对齐开始日期和结束日期，但没有成功。
开始和结束日期不像其他块一样排列。 我什么都不懂……
如果你解决了我的问题，我将无限感激你。我真的不明白为什么日期块没有对齐。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<h1 id="welcome">html CSS JS</h1>
<div class="row">
<div class="col-12" *ngIf="currentView == 0">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Libellé</label>
<div class="col-12 col-sm-9">
<input id="name" type="text" class="form-control" [(ngModel)]="search.name"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Libellé" autofocus>
</div>
</div>
<div class="form-group row">
<label for="ticker" class="col-12 col-sm-3 col-form-label">Bourse</label>
<div class="col-12 col-sm-9">
<input id="ticker" type="text" class="form-control" [(ngModel)]="search.ticker"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Bourse" autofocus>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="isin" class="col-12 col-sm-3 col-form-label">ISIN</label>
<div class="col-12 col-sm-9">
<input id="isin" type="text" class="form-control" [(ngModel)]="search.isin"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="ISIN" autofocus>
</div>
</div>
<div class="form-group row">
<label for="filterForMarkets" class="col-12 col-sm-3 col-form-label">Marché</label>
<div class="col-12 col-sm-9">
<select id="filterForMarkets" class="form-control"
style="width:100%; max-width: 300px;"
(change)="filterForMarkets($event.target.value)">
<option value="">--Tous les marchés--</option>
<option *ngFor="let m of markets" value=m.marketID>
m.name
</option>
</select>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de départ</label>
<div class="input-group">
<input name="beginDate" id="beginDate" type="text" class="form-control"
style="background-color: white; "
(ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
(ngModelChange)="changedBeginDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp1.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de fin</label>
<div class="input-group">
<input name="endDate" id="endDate" type="text" class="form-control"
style="background-color: white;"
(ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
(ngModelChange)="changedEndDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp2.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ">
<div class="text-right">
<button type="button" class="btn btn-primary" (click)="launchSearch(modalConfirm)">
Rechercher
</button>
<button type="button" class=" ml-1 btn btn-primary" (click)="getTransactions(0)">
Affichez tous les mouvements
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：使用 CSS 的 flex 属性将解决您的问题，它非常有利于按照我们的意愿对齐。
试试这个：
.form-group
display: flex;
然后您显然可以添加边距和其他属性以将所有项目对齐在一起。
【讨论】：
以上是关于开始日期和结束日期对齐的主要内容，如果未能解决你的问题，请参考以下文章