Question

我有一个* ngFor，可让我的页面中充满物品。在ngFor中，我有要显示的横幅。但横幅的宽度与其他项目不同。

因此横幅只能在原始li宽度内单击。横幅仅显示一半，但我无法单击它。

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

li的原始尺寸为200X250像素当显示横幅时，li大小更改为200X400。（横幅高度已添加到其他项目的高度）

blue =横幅

红色=可点击

绿色=不可点击

<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);

}

}

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

0 个答案: