首先,第一个问题在于如果在当前盒子只有两个元素的时候,如何让其自适应合理的位置。。
== 本来我刚开始的想法是用flex布局去写,直接写在行内式,发现没有用,会挤在一起==
后来发现只能在行内式添加width:100%,
然后在修改组件的样式,需要修改三个地方
/deep/ .u-tabs__wrapper__nav{
justify-content: space-around;
//这个是为了让代码块均匀分布
}
/deep/ .u-tabs__wrapper__nav__line{
left: 0;
//这个是为了让元素恢复原位
}
/deep/ .u-tabs__wrapper__nav__item{
flex:1;
//经过查看源码得知,下划线之所以错位,是因为每一个子盒子加起来并没有撑满整个盒子,所以当下划线取定位的时候,就会发生错位,因为两个子盒子宽度无法沾满整个盒子,所以就需要flex:1来沾满盒子。
}
经过查看源码得知,下划线之所以错位,是因为每一个子盒子加起来并没有撑满整个盒子,所以当下划线取定位的时候,就会发生错位,因为两个子盒子宽度无法沾满整个盒子,所以就需要flex:1来沾满盒子。