CSS垂直对齐生成的纯文本

时间：2019-03-26 20:50:54

标签： javascript html css

我试图在Angular中对齐ng-for生成的一些纯文本，但似乎无法正常工作。

我目前正在得到结果：

E |

A |

D |

G |

B |

E |

--- 7-

21 -----

---- 20-

----- 18

-5 ----

0 -----

-19 ----

---- 16-

---- 22-

----- 10

-9 ---

----- 5

--- 14-

---- 21-

--- 13-

-4 ---

-19 ----

13 -----

--- 18-

----- 0

-15 ---

--- 17-

--- 4-

---- 1-

11 -----

-24 ---

--- 2-

10 -----

-21 ----

23 -----

我希望结果看起来像

E | -21

A | -

D | -

G | 7-

B | -

E | -

因此所有行都垂直对齐。

我一直在尝试flex，但是我似乎无法弄清楚如何排列。

请帮助！

.container-1{
  display:flex;
  flex-direction: column;
}

.box-1{
  flex:1
}

.container-2{
  display:flex;
  flex-direction: row;
}
<div class = "container-1">
    <div class="box-1">
        <div class="box-1">E |</div>
        <div class="box-1">A |</div>
        <div class="box-1">D |</div>
        <div class="box-1">G |</div>
        <div class="box-1">B |</div>
        <div class="box-1">E |</div>
      </div>
  <div class = "container-2" *ngFor="let currentTab of tabs;">
    <div *ngIf="currentTab.string == 0; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 1; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 2; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 3; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 4; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 5; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
  </div>
</div>

4 个答案:

答案 0 :(得分：0)

使用onBackPressed()容器的Activity属性并将其设置为[align-items][1]。

flex

center
.container-1 {
...
  align-items: center;
}

答案 1 :(得分：0)

我不确定要实现的目标。

我在每个div周围创建了边框，因此您可以看到结果。请进一步详细说明该怎么做。

.main {
  display: flex;
}

.main div {
  border: 1px solid rgba(0, 0, 0, .2);
}

.container-2 {
  flex: 1;
}
<div class="main">
  <div class="container-1">
    <div class="box-1">E |</div>
    <div class="box-1">A |</div>
    <div class="box-1">D |</div>
    <div class="box-1">G |</div>
    <div class="box-1">B |</div>
    <div class="box-1">E |</div>
  </div>
  <div class = "container-2" *ngFor="let currentTab of tabs;">
  <div *ngIf="currentTab.string == 0; then thenBlock else elseBlock"></div>
  <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
  <ng-template class="box-1" #elseBlock>-</ng-template>
  <div *ngIf="currentTab.string == 1; then thenBlock else elseBlock"></div>
  <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
  <ng-template class="box-1" #elseBlock>-</ng-template>
  <div *ngIf="currentTab.string == 2; then thenBlock else elseBlock"></div>
  <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
  <ng-template class="box-1" #elseBlock>-</ng-template>
  <div *ngIf="currentTab.string == 3; then thenBlock else elseBlock"></div>
  <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
  <ng-template class="box-1" #elseBlock>-</ng-template>
  <div *ngIf="currentTab.string == 4; then thenBlock else elseBlock"></div>
  <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
  <ng-template class="box-1" #elseBlock>-</ng-template>
  <div *ngIf="currentTab.string == 5; then thenBlock else elseBlock"></div>
  <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
  <ng-template class="box-1" #elseBlock>-</ng-template>
  </div>
</div>

答案 2 :(得分：0)

我已将您的代码更新为所需的结果。仍然有很多改进的空间。

.container-1 {
  display:flex;
  flex-direction: row;
}

.box-1 {
  display: flex;
  flex-direction: column;
  width: 4%;
}

.container-2 {
  display: flex;
  flex-direction: column;
  width: 2%;
  text-align: center;
}
<div class = "container-1">
  <div class="box-1">
    <div>A |</div>
    <div>D |</div>
    <div>G |</div>
    <div>B |</div>
    <div>E |</div>
    <div>E |</div>
  </div>
  <div class = "container-2" *ngFor="let currentTab of this.tabs;">
    <div *ngIf="currentTab.string == 0; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock><div>{{currentTab.tab}}</div></ng-template>
    <ng-template class="box-1" #elseBlock><div>-</div></ng-template>
    <div *ngIf="currentTab.string == 1; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock><div>{{currentTab.tab}}</div></ng-template>
    <ng-template class="box-1" #elseBlock><div>-</div></ng-template>
    <div *ngIf="currentTab.string == 2; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock><div>{{currentTab.tab}}</div></ng-template>
    <ng-template class="box-1" #elseBlock><div>-</div></ng-template>
    <div *ngIf="currentTab.string == 3; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock><div>{{currentTab.tab}}</div></ng-template>
    <ng-template class="box-1" #elseBlock><div>-</div></ng-template>
    <div *ngIf="currentTab.string == 4; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock><div>{{currentTab.tab}}</div></ng-template>
    <ng-template class="box-1" #elseBlock><div>-</div></ng-template>
    <div *ngIf="currentTab.string == 5; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock><div>{{currentTab.tab}}</div></ng-template>
    <ng-template class="box-1" #elseBlock><div>-</div></ng-template>
  </div>
</div>

答案 3 :(得分：0)

我希望它将对您有所帮助。谢谢

.container-wrapper {
  display: flex;
}

.box-1{
  white-space: nowrap;
}
<div class="container-wrapper">
  <div class="container">
    <div class="box-1">E |</div>
    <div class="box-1">A |</div>
    <div class="box-1">D |</div>
    <div class="box-1">G |</div>
    <div class="box-1">B |</div>
    <div class="box-1">E |</div>
  </div>
<div class="container" *ngFor="let currentTab of tabs;">
  <div *ngIf="currentTab.string == 0; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 1; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 2; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 3; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 4; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 5; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
  </div>
</div>

相关问题
最新问题