el-tabs设置每个选项之间的间距且下划线对齐文字

当给选项卡设置间距时,此时下划线会有偏移的问题,也就是下划线和文字并没有对齐。
解决办法:
给el-tabs__item设置内边距

::v-deep .el-tabs__item {
  padding-right: 40px;  //此属性可使得激活的下划线和文字对齐
  &.is-active{
    color: #cf8e00;
  }
}
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-tabs和el-tab-pane之间间距可以通过两种方式来调整。 第一种方式是通过在el-tabs组件中使用tab-class属性来应用自定义的样式类。你可以在该样式类中设置标签头的间距样式。例如,可以在tab-class属性中添加一个样式类名为"my-tabs-header",然后在CSS文件中定义这个样式类来调整标签头的间距。这样就可以实现调整el-tabs和el-tab-pane之间间距了。 第二种方式是对具体的标签进行定制样式。在el-tab-pane组件上使用label-class属性,可以为每个标签设置独立的样式类。通过在这个样式类中设置间距样式,就可以调整不同标签之间间距。例如,可以为第一个标签设置一个样式类名为"my-label",然后在CSS文件中定义这个样式类来调整该标签与其他标签之间间距。这样就可以实现调整el-tabs和el-tab-pane之间间距了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [手动动态改变el-tabs标签页顺序](https://download.csdn.net/download/weixin_45421804/85813374)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [在el-tabs怎么设置标签头距离左边距30px](https://blog.csdn.net/qq_42294411/article/details/130053001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值