[英]How can I vertically align all elements in a list of text?
我試圖在我的 Angular 應用程序中對齊這些元素 - 日期、文件總數和文件大小。 如果有一個更大的數字和更多的數字,那么它會將其他元素推開。 我嘗試更改填充邊距並嘗試顯示:Flex、內聯和內聯塊。 我希望每個元素的開頭對齊,即使數字有更多或更少,所以假設我們有 - 2019 年 4 月 1 日 1 個文件 3445 G 每個元素的開頭將與 2019 年 3 月 28 日對齊 34 個文件 29282 G .
這些元素的跨度為 class 的 jobdate-item-date、jobdate-item-file-total 和 jobdate-item-file-length。 當您單擊這些時,它們會打開顯示作業數據列表。 這是一張圖片和我當前的代碼 -
Html -
<div *ngFor="let date of selectedJob.dates" class="card-date-file">
<div class="detail-item" (click)="toggle()">
<span class="jobdate-item-date">{{ date.date | date: 'MMM dd, y' }}</span>
<span class="jobdate-item-file-total">{{ date.files.length }} files</span>
<span class="jobdate-item-file-length">{{ jobFileCalc(date.files) }} GB</span>
</div>
<ng-container *ngIf="show">
<div *ngFor="let file of date.files" class="list" >
<span class="file-item-filename">{{ file.filename }}</span>
<span class="file-item-incr">{{ file.incr? 'INCR':'FULL' }}</span>
<span class="file-item-time">{{ file.dttm | date:'h:mm' }}{{ file.dttm | date:'a' | lowercase }}</span>
<span class="file-item-size">{{ file.sizegb.toFixed(1)| number : fractionSize }} GB</span>
</div>
</ng-container>
</div>
</div>
CSS -
.jobdate-item-date {
padding: 0.1em 1.1em 0.3em 0.8em;
}
.jobdate-item-file-total {
padding: 0.3em 1.1em 0.3em 1.1em;
}
.jobdate-item-file-length {
padding: 0.3em 1.1em 0.3em 1.1em;
}
你可以給每個元素一個特定的寬度(我在我的例子中使用了 flexbox),如果它太長,你可以用一些省略號截斷文本。 您當然可以使用寬度,或使用百分比來實現您想要的結果。
.detail-item { display: flex; padding: 8px; }.jobdate-item-date, .jobdate-item-file-total, .jobdate-item-file-length { flex: 0 0 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
<div class="detail-item" (click)="toggle()"> <span class="jobdate-item-date">Mar 29, 2019</span> <span class="jobdate-item-file-total">12 files</span> <span class="jobdate-item-file-length">2280.2 GB</span> </div> <div class="detail-item" (click)="toggle()"> <span class="jobdate-item-date">Apr 3, 2019</span> <span class="jobdate-item-file-total">2 files</span> <span class="jobdate-item-file-length">99.2 GB</span> </div> <div class="detail-item" (click)="toggle()"> <span class="jobdate-item-date">Apr 3, 2019</span> <span class="jobdate-item-file-total">2 files</span> <span class="jobdate-item-file-length">324324234234234232423 GB</span> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.