css - Angular *ngFor li - 如何设置两个项目宽度的项目宽度？

Question

我有一个 *ngFor，它用项目填充我的页面。在 ngFor 中，我有要显示的横幅。但横幅宽度与其他项目不同。

所以横幅只能在原始 li 宽度的宽度内点击。一半的横幅刚刚显示，但我无法点击它。

我认为问题是因为如果显示横幅，其他项目的高度会变大。

li 原始尺寸为 200X250 像素，当横幅出现时，li 尺寸更改为 200X400。（横幅高度与其他项目高度相加）

蓝色 = 横幅

红色 = 可点击

绿色 = 不可点击

<ul class="row">
  <li 
    *ngFor="let fav of favoriteLessons2;  let i = index" 
    class="col-12 col-sm-6 col-md-4 col-xl-4">
    <div class="item pointer">
      <jt-lesson-item 
        [lesson]="fav" 
        [userLessonId]="fav.id" 
        [lessonType]="true">
      </jt-lesson-item>
      <p-progressBar 
        class="customProgress" 
        [value]="func(favoriteLessons[i]) | number:'1.0-0'">
      </p-progressBar>
    </div>
    <div 
      class="banner pointer" 
      *ngIf="i > 0 && i%counter==0">
      <jt-ngui-in-view 
        [once]="true" 
        (inView)="updateBannerWatched(bannersArray[bannerIndex(i)])">
        <ng-template>
          <img 
            (click)="updateBannerClicked(bannersArray[bannerIndex(i)])" 
            [src]="bannersArray[bannerIndex(i)].imageUrl" 
            (click)="bennerPressed(bannersArray[bannerIndex(i)].id)">
        </ng-template>
      </jt-ngui-in-view>
    </div>
  </li>
</ul>

我该如何处理这个问题？谢谢你 ！

编辑：CSS代码：

ul{
    text-align: center; 
    direction: rtl;
    height:100%;
    padding-top: 40px;
    padding-right: 90px;
}

li{
    width:100%;
    max-width: 200px;
    list-style: none;
    direction: rtl;
    text-align: right;
    // display: inline-block;
    margin:10px;
    padding:10px;
    &.banner {
        width:100%;
        display: block;
        padding: 10px;
        margin-top:10px;
    }
}
img{
    display: block;
    margin: 10px;
    padding-top: 23px;
}



.item{
    background-color: #FFF;
    border-radius: 4px;
    width:200px;
&:hover{
    background: rgba(23, 23, 23, 0.8);
    border-radius: 4px;
    bottom: -4px;
    color: #000;
    left: -4px;
    right: -4px;
    top: -4px;
    display: block;
    opacity: 20;
    z-index: 1;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
    padding:1px;
    border-radius: 4px;
    background-color: rgb(243, 243, 243);

}

}

标签： cssangularhtml-listsngfor