【求助】v-for遍历li出现第二行第一个不能顶头显示,然而第三行又可以

狂奔的蜗牛
  • 5
新手上路,请多包涵

问题描述

image.png
如图,第二行不能顶头显示,但是第三行可以

问题出现的环境背景及自己尝试过哪些方法

循环从后台获取的课程数据,数据是完整的,但是循环显示出来样式有问题,尝试过全部li写死,第二行样式可以正常显示

相关代码

循环代码

<li v-for="item in data.courses" :key="item.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    ![](item.cover)
                    <div class="cc-mask">
                      <a :href="'/course/'+item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/course/'+item.id" :title="item.title" class="course-title fsize18 c-333">{{ item.title }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                    <span v-if="Number(item.price) === 0" class="fr jgTag bg-green">
                      <i class="c-fff fsize12 f-fA">免费</i>
                    </span>
                    <span class="fl jgAttr c-ccc f-fA">
                      <i class="c-999 f-fA">{{ item.viewCount }}人学习</i>
                      |
                      <i class="c-999 f-fA">9634评论</i>
                    </span>
                  </section>
                </div>
              </li>

你期待的结果是什么?实际看到的错误信息又是什么?

页面console无报错

回复
阅读 206
1 个回答

image.png
应该是div的高度有超出导致的。样式问题

你知道吗?

宣传栏