uniapp u-tabs的项目无法撑满整个盒子的问题，以及下划线异常

最新推荐文章于 2024-08-19 17:04:41 发布

阿强的博客

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量2k

点赞数 9

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/cv1002420186/article/details/130419597

版权

文章讲述了在遇到flex布局中，只有两个元素且需要均匀分布时的处理方法。通过设置`justify-content:space-around`确保元素空间分布，使用`flex:1`使子元素填充整个容器，以修正下划线错位问题。

摘要由CSDN通过智能技术生成

首先，第一个问题在于如果在当前盒子只有两个元素的时候，如何让其自适应合理的位置。。

== 本来我刚开始的想法是用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来沾满盒子。