antd tabs修改下方横线的位置 (antdv同理)
默认样式
1.通过div.ant-tabs-ink-bar 这个class的元素来控制下面的横线
2.线的样式
.ant-tabs-ink-bar {
position: absolute;
bottom: 0;
left: xxx;
}
// 然后根据点击的标签位置更新他的left: xxx
// left是总宽度的left值,并且标签数量不同,这个值是需要修改的
效果:
3.宽度默认是选中标签的宽度(width+padding)
4.如何保持横线固定宽度居中:
前提:必须保证每个tab的宽度是一样的,这样才能让每个tab居中
.ant-tabs-ink-bar{
left: 15%;
width: 32px;
background-color: @blue-1;
}
其他问题:
tab-pane的内容为什么不展示