如何将多行文本对齐为表格的列

Question

我必须显示以下文本（请注意，月份应与其他两行的月份正确对齐，时间应与其他两行的时间正确对齐，日期也应如下所示）： / p>

所有这些值都来自角度7项目中div内的双向数据绑定，如下所示：

mapSupply :: (a -> b) -> Supply s a -> Supply s b
mapSupply mapFunc (S supFuncA) = S supFuncB where
    supFuncB :: Stream s -> (b, Stream s)
    supFuncB strm = let (la, strms) = supFuncA strm in 
        ((mapFunc la), strms)

请帮助我以完全相同的样式显示这些值。

Answer 1

您可以简单地执行以下操作：

<div *ngFor="let date of dates">
  <span>{{date.month}}</span><span>{{date.day}}</span><span>{{date.time}}</span>
<div>

为这些跨度（填充，边距）添加一些样式...

Answer 2

HTML：

<div [ngClass]="'container'" *ngFor="let date of dates">
   <div>{{date.month}}</div>
   <div>{{date.day}}</div>
   <div>{{date.time}}</div>
</div>

CSS：

.container{
  width:100%;
  overflow:hidden;
}

.container > div{
  width:33.333%;
  float:left;
}

Answer 3

只需使Angular创建以下HTML结构：

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 0 10px;
}

<div class="table">
  <div class="row">
    <span class="cell">December</span>
    <span class="cell">15,2015</span>
    <span class="cell">5 a.m.</span>
  </div>
  <div class="row">
    <span class="cell">October</span>
    <span class="cell">10, 2010</span>
    <span class="cell">6 p.m.</span>
  </div>
  <div class="row">
    <span class="cell">March</span>
    <span class="cell">12, 2012</span>
    <span class="cell">12 a.m.</span>
  </div>
</div>

在您的角度中，应该是

<div class="table">
  <div class="row" *ngFor="let date of dates">
    <span class="cell">{{date.month}}</span>
    <span class="cell">{{date.day}}</span>
    <span calls="cell">{{date.time}}</span>
  <div>
</div>

Answer 4

Stacklitz solution
 请遵循以下stacklitz代码获取解决方案

css

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

.colm{
  min-width:100px;
}

组件

<div class=" row wrapper" *ngFor="let date of dates">
 <div  class="colm">{{date.month}}</div> 
 <div  class="colm">{{date.day}} </div>
 <div  class="colm">{{date.time}}</div>
<div>