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

问题描述

问 题

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

            <ul class="content-right">
                <div class="data_title">
                    <li>最新</li>
                    <li>涨幅</li>
                    <li>最高</li>
                    <li>最低</li>
                    <li>总手</li>
                    <li>总额</li> 
                </div>
 
                <div class="data_content"  v-for="value in newdata" >
                        <li> {{ value.newbest }} </li>                    
                        <li> {{ value.rise }} </li>                    
                        <li> {{ value.height }} </li>                    
                        <li> {{ value.low }} </li>                    
                        <li> {{ value.zongs }} </li>                    
                        <li> {{ value.zonge }} </li>                    
                </div>
            
            </ul>
            
            
            
            
            
.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;
}

解决方案

1.html:<ul><li><img src="image/custom.png"><p>赵晨阳律师</p></li><li><img src="image/custom.png"><p>蒋曼律师</p></li><li><img src="image/custom.png"><p>沈阳律师</p></li><li><img src="image/custom.png"><p>北京律师</p></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;

}

这篇关于javascript - 移动端界面超出左右滚动问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！