Html 如何垂直对齐文本列表中的所有元素？

我试图在我的角度应用程序中对齐这些元素-日期、文件总数和文件大小。 如果有一个更大的数字和更多的数字，那么它是推动其他元素远离。 我尝试过更改填充边距，并尝试过显示：Flex、inline和inline block。 我希望每个元素的开头对齐，即使数字有更多或更少的数字，因此假设我们有-2019年4月1日1文件3445 G每个元素的开头将与2019年3月28日34文件29282 G对齐

这些元素位于范围内，具有一个类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>

---

你可以给每个元素一个特定的宽度（我在我的例子中使用了flexbox），如果它太长，你可以用一些省略号来截断文本。当然，您可以使用宽度，或者使用百分比来实现您想要的结果

。详细信息项{
显示器：flex；
填充：8px；
}
.jobdate项目日期，
.jobdate项目文件总计，
.jobdate项目文件长度{
flex:0100px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

2019年3月29日
12个文件
2280.2 GB
2019年4月3日
2个文件
99.2 GB
2019年4月3日
2个文件
324324234232342423 GB

您可以给每个元素指定一个特定的宽度（我在示例中使用了flexbox），如果它太长，如果您愿意，可以用一些省略号截断文本。当然，您可以使用宽度，或者使用百分比来实现您想要的结果

。详细信息项{
显示器：flex；
填充：8px；
}
.jobdate项目日期，
.jobdate项目文件总计，
.jobdate项目文件长度{
flex:0100px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

2019年3月29日
12个文件
2280.2 GB
2019年4月3日
2个文件
99.2 GB
2019年4月3日
2个文件
324324234232342423 GB

您想在这里做什么？您想按日期字段排序并按其显示？如果是表格数据，为什么不使用表格？然后你应该能够按照你想要的方式对齐它，否则就不用填充，而是给跨度一个宽度。是的，这就是我目前正在尝试的，如果有更好的方法，尽管我会尝试。因此，您可以在图片中看到，由于2019年3月31日的数字较大，正在推送14文件和4938.8 G。因此，如果可能，最好对齐每个元素的开头。是的，这是表格的用途。让你的应用程序更易访问和语义化，并切换到该应用程序。你想在这里做什么？您想按日期字段排序并按其显示？如果是表格数据，为什么不使用表格？然后你应该能够按照你想要的方式对齐它，否则就不用填充，而是给跨度一个宽度。是的，这就是我目前正在尝试的，如果有更好的方法，尽管我会尝试。因此，您可以在图片中看到，由于2019年3月31日的数字较大，正在推送14文件和4938.8 G。因此，如果可能，最好对齐每个元素的开头。是的，这是表格的用途。让你的应用程序更易访问和语义化，并切换到该应用程序。完美。你也可以为响应设计添加媒体查询。这是一个好主意，但我使用*ngFor来获取和显示模板上的数据。所以元素行的数量取决于数据，所以我不能这样布置。谢谢你等等，我还可以用这个。这当然有所帮助。谢谢@eldrimperfect。你也可以为响应设计添加媒体查询。这是一个好主意，但我使用*ngFor来获取和显示模板上的数据。所以元素行的数量取决于数据，所以我不能这样布置。谢谢你等等，我还可以用这个。这当然有所帮助。谢谢你@elDrimm

.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;
}