html代码部分:
<div class="left-list" @click="show" v-if="showdt">
<div class="left-list-dingwei">
<div class="hidden_top_flex">
<div class="hidden_top_flex_list">
<div class="hidden_top_flex_cell img1">
<div class="flexbox"><img src="../icon/icon.png" alt=""></div>
<div> <span style="color: #002ee5;">{{num + 1}}</span>/{{allnum}}</div>
</div>
<div class="hidden_top_flex_cell img2">
<div class="flexbox"><img src="../icon/icon1.png" alt=""></div>
<div>0</div>
</div>
<div class="hidden_top_flex_cell img3">
<div class="flexbox"><img src="../icon/icon3.png" alt=""></div>
<div>0</div>
</div>
</div>
<div class="hidden_top_flex_list img1">
<div style="display: flex;"><img src="../icon/icon2.png" alt=""></div>
<div>交卷</div>
</div>
</div>
<ul ref="element">
<li class="becg" v-for="(item,i) in examdata" v-on:click="addClass(i)" v-bind:class="{'stlo':btr[i]||false,'stlt':bfa[i]||false}" v-if="i+1 < 10 ">
0{{i+1}}
</li>
<li class="becg" v-on:click="addClass(i)" v-bind:class="{'stlo':btr[i]||false,'stlt':bfa[i]||false}" v-else>
{{ i + 1 }}
</li>
</ul>
</div>
</div>
CSS样式部分
.left-list ul {
padding: 0.3rem 0px;
padding-right: calc(((100vw - (13.8rem + 60px + 12px))*0.5) - 17px);
padding-left: calc(((100vw - (13.8rem + 60px + 12px))*0.5) + 0px);
display: flex;
flex-wrap: wrap;
/* position: fixed;
bottom: 0px; */
background-color: white;
max-height: calc(100% - 3rem);
overflow-y:scroll;
justify-content: space-between;
}
.left-list ul li:last-child{
margin-right: auto;
}
最主要是选择器:last-child 的 margin-right: auto;
如果有大佬有其他问题可以留言。喜欢的可以点赞,大家互相交流~