关于overflow-x失效的探讨
程序员文章站
2024-01-11 16:51:22
...
最近开发微信小程序遇到个问题 :overflow-x无效。。。无论怎样设置子元素的浮动样式,都没有效果,简直无敌了!感觉像是学习了假的css。
HTML如下:
<view class="video-tabBar">
<view class="changeTab">
<text class="selected">WEB前端</text>
<text>JAVA</text>
<text>PHP</text>
<text>Python</text>
<text>Node.Js</text>
</view>
<view class="select">
<text class="iconfont icon-down"></text>
</view>
</view>
CSS如下:
.video-tabBar {
background-color: #fff;
display: flex;
width: 100%;
view {
display: block;
overflow-x: scroll;
width: 80%;
text {
display: inline-block;
padding: ~"30rpx";
}
}
& > view:last-child {
width: 20%;
text-align: right;
}
}
最后始终不能横向滚动!Why?巴拉巴拉百度一堆最后找到问题,如果子容器作为一个div,那么子容器的宽度
必须大于父容器的宽度父容器才会横向滚动那么就简单了
<view class="video-tabBar">
<view class="changeTab">
<view>
<text class="selected">WEB前端</text>
<text>JAVA</text>
<text>PHP</text>
<text>Python</text>
<text>Node.Js</text>
</view>
<!--<text></text>-->
</view>
<view class="select">
<text class="iconfont icon-down"></text>
</view>
</view>
那么给所有子容器增加个父容器,然后设置父容器的宽度大于祖父容器问题就解决了
.video-tabBar {
background-color: #fff;
display: flex;
width: 100%;
view {
display: block;
overflow-x: scroll;
width: 80%;
text {
display: inline-block;
padding: ~"30rpx";
}
view {
display: flex;
overflow: auto;
width: ~"1000rpx";
text {
width: ~"200rpx";
text-align: center;
}
.selected {
position: relative;
}
.selected::after {
content: "";
position: absolute;
top: 95%;
left: 25%;
height: 5%;
width: 50%;
background-color: #339966;
}
}
}
& > view:last-child {
width: 20%;
text-align: right;
}
}
最终解决了问题可能有人会子容器元素不固定怎么办?个人建议:js控制。
下一篇: 新手~ smarty的表单传值有关问题