问

javascript - 移动端界面超出左右滚动问题？

大姑娘苍之瑜发布于 2022-11-14 15:52

overflow

移动端页面，页面宽度为100px,里面的内容为1000px,超出隐藏，却滚动不了，p怎么布局
最好给个小实例，布局有点不懂，麻烦了

            
                
                    
最新
                    涨幅
                    最高
                    最低
                    总手
                    总额 
                
 
                
                        
 {{ value.newbest }}                     
                         {{ value.rise }}                     
                         {{ value.height }}                     
                         {{ value.low }}                     
                         {{ value.zongs }}                     
                         {{ value.zonge }}                     
                
            
            
            
            
            
            
            
.content-right {
    font-size: 14px;
     width: 60%;
    overflow-x:scroll; 
    -webkit-overflow-scrolling:touch;
    
}
    .data_title {
    width: 300%;
    overflow: hidden;
    display: flex;
    display: -moz-box;  /* Firefox */ 
    display: -ms-flexbox;    /* IE10 */ 
    display: -webkit-box;    /* Safari */  
    display: -webkit-flex;    /* Chrome, WebKit */ 
    display: box;  
    display: flexbox;
    justify-content:space-around;
    border-bottom: 1px solid #e5e5e5;
    line-height: 30px;
    height: 30px;
}
.content-right li{
    text-align: center;
    flex-grow: 1;
}
.content_left_null{
    border-bottom: 1px solid #e5e5e5;
    height: 30px;
    line-height: 30px;
}
.bottom-null{
    padding: 24px;
}
.data_title li{
    position: relative;
}
.data_title li:after{
    content:"";
    border-right: 1px solid #e5e5e5;
    position: absolute;
    right: 0;
    height: 20px;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.data_content{
    width: 300%;
    overflow: hidden;
    display: flex;
    display: -moz-box;  /* Firefox */ 
    display: -ms-flexbox;    /* IE10 */ 
    display: -webkit-box;    /* Safari */  
    display: -webkit-flex;    /* Chrome, WebKit */ 
    display: box;  
    display: flexbox;
    justify-content: space-around;
    border-bottom: 1px solid #e5e5e5;
    line-height: 53px;
    height: 53px;
}
.data_content li{
    text-align: right;
    width: 100%;
    padding-right: 20px;
}

3 个回答

overflow:hidden//超出隐藏，无法滚动。
overflow:scroll//内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

2022-11-14 17:25 回答

mobiledu2502870957

overflow:scroll?

2022-11-14 17:25 回答

何包蛋0727
1.html:<ul><li><img src="image/custom.png">赵晨阳律师</li><li><img src="image/custom.png">蒋曼律师</li><li><img src="image/custom.png">沈阳律师</li><li><img src="image/custom.png">北京律师</li></ul>

2.css：ul {
```
overflow:auto;//超出部分自动出现滚动条
width: 1000%;
float: left;
```
}
.pic li {
```
float: left;
width: 4rem;
margin-left: 0.5rem;//rem单位是移动端的
font-size: 0.4rem;
```
}
2022-11-14 17:25 回答

mobiledu2502917797

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签