Question

我要创建一个时间轴组件，我有以下模板

<ul *ngIf="alerts!=undefined" class="timeline">
        <li *ngFor="let alert of alerts; let i=index" [class.timeline-inverted]="i % 2 == 1">
            <div class="timeline-badge">
                <span>{{alert.type}}</span>
            </div>
            <div class="timeline-panel">
                <div class="timeline-body">
                    <p>{{alert.id}}</p>
                </div>
                <div class="timeline-footer">
                    <p class="">{{alert.date}}</p>
                </div>
            </div>
        </li>
    </ul>

相应的.scss文件就像

.timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300;
    border-style: solid;
    border-width: medium;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 6px;
    background: $magenta;
    left: 50%;
    margin-left: -3px;
}
.timeline > li {
    margin-bottom: 40px;
    position: relative;
    width: 50%;
    float: left;
    clear: left;
}
.timeline > li:before, .timeline > li:after {
    content:" ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-panel {
    width: calc(100% - 35px);
    width: -moz-calc(100% - 35px);
    width: -webkit-calc(100% - 35px);
    float: left;
    border-radius: 5px;
    background: $white;
    position: relative;
}
.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    content:" ";
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid $white;
    border-right: 0 solid $white;
    border-bottom: 14px solid transparent;
    content:" ";
}

由<ul>创建的<li>标记未填充*ngFor标记，这会使时间线的“行”消失。

黑色边框是<ul>标记的边框，可以将所有<li>标记包裹在其下方，让洋红色线穿过所有气泡。

Answer 1

问题在于CSS

当你在li上使用float时，它实际上是从文档流中删除它。

通过使用Overflow：hidden，它将以某种方式解决此问题。

您可以阅读此answer

Answer 2

你的问题不在于CSS，是否有角度结构指令。请阅读这篇文章，

https://angular.io/guide/structural-directives#group-sibling-elements-with-ng-container

我相信，你会在那里找到解决方案。

Angular2：<li>，* ng不在<ul>内

2 个答案: