为什么我的横向滚动条不能滚动?下面代码哪有错
 <div class="wxPictureAnimate">
    <div class="TabListContent">
        <ul class="TabList">
            <li class="selected Commonliend"><a><h3>搞笑</h3></a></li>
            <li class="Commonliend"><a><h3>猎奇</h3></a></li>
            <li class="Commonliend"><a><h3>电影Gif</h3></a></li>
            <li class="Commonliend"><a><h3>流行</h3></a></li>
            <li class="Commonliend"><a><h3>内涵</h3></a></li>
            <li class="Commonliend"><a><h3>心情</h3></a></li>
            <li class="Liend"><a><img src="../css/images/Mobile_bg0314.png"></a></li>
        </ul>
    </div>


        .wxPictureAnimate{
    height: 100%;
}
/*Tab选项卡*/
.wxPictureAnimate .TabListContent{
    height:40px;
    position: fixed;
    top: 44px;
    left: 0px;
    overflow:auto;
    overflow-y:hidden;
    border-bottom:1px solid #d9d9d9;
}
.wxPictureAnimate .TabList{
    width: 100%;
    height:40px;
    background-color:#ffffff;
    font-size: 16px;
    line-height: 38px;
}


.wxPictureAnimate .TabList li{
    height:38px;
    background-color:#ffffff;
    border-top: none;
    border-right: none;
    border-left: none;
    float: left;
    margin-left: 16px;
}

0

2个回答

(1)纵向滚动条需要fix定位,因为没有高度。
而横向滚动条,width:100% 只有高度。。就不需要fix定位。
相对定位就可以。
(2)在ul列表中加上,white-space: nowrap;

0
Vivianluolita
Vivianluolita (4)设置成display:inline-block后。ul里的li之间不能有空隙
2 年多之前 回复
Vivianluolita
Vivianluolita (3)ul不能有float属性,要改成display:inline-block
2 年多之前 回复

我复制你的代码,可以滚动的
图片说明
图片说明

0
zy_281870667
Bug开发攻城狮 回复Vivianluolita: 我用的是chrome浏览器,你用chrome试一试
2 年多之前 回复
Vivianluolita
Vivianluolita 可是我自己的没有
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Mac intellij idea 滚动条不显示
在mac下使用intellij idea工具开发,默认情况下滚动条是在鼠标点击且移动内容的情况下才会显示,默认是看不到滚动条的。 如果你想在任何情况下都看到滚动条,只需要点击苹果的【系统偏好设置】,然后选择【通用】,将“显示滚动条”选中【始终】重启idea就可以了。
IntelliJ IDEA 控制台左右滑动
滚动条不是没有 只是隐身了 眼神不好不好看
让sublime一行显示更多代码出现横向的滚动条,以及修改默认tab键长度
用了sublime有一段时间了,很喜欢这种又轻插件又多看着又舒服的编辑器,但是在下载完默认情况下使用,一行的长度是固定的,开始没感觉到什么影响,也就不管将就着用呗,当然也以为这编辑器很来就这样,现在回想起来自己好傻。          但是,当你用来写html代码时,特别是现在的html代码一层又一层的标签,这时候你就要抓狂了,一行显示不完的代码在后面几个字几个字一行的显示,看着就抓狂。不能忍了
解决移动端页面布局时底部出现横向滚动条
页面布局后,底部出现横向滚动条 解决方法: 1:查看是从哪个部位开始出现滚动条 2:给包裹的元素添加属性:box-sizing:border-box 3:整体包裹元素添加熟悉:box-sizing:border-box;overflow:auto; 具体在看情况吧!发正我的这样解决了bug...
解决移动端页面出现 X轴横向滚动条问题
最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站,写完后发现 WAP 端总是会出现横向滚动条,也就是 X 轴滚动条,导致 WAP 端页面左右滑来滑去,很是令人蛋疼,即使设置了 overflow-x: hidden 也无法去除,通过各种途径寻找解决方法,最终在 张鑫旭 大神的一篇文章里找到了最终解决方法,在这里记录一下防止之后自己用得到时还需要重新找,也为那些同样有这方面问题...
让bootstrap表格自动出现水平滚动条
在table外加一个&amp;lt;div&amp;gt;,如图: OK
easyui datagrid 显示横行滚动条
var datagrid = $('#datagridw').datagrid({ pageSize : 15, pageNumber : 1, fit:true, pagination : true, singleSelect:true, collapsible: true, rownumbers : true, loadMsg : '正在加载...', url : '....
记一次element-ui配置化table组件的适应性问题(横向滚动条)
本来想在 jsfiddle 重现下的,结果没有成功,就给大家看截图吧 vue版本:2.5.3 element-ui版本:1.4.13 浏览器:chrome 66.0.3359.170 大家可以发现,固定了高度的 table 不仅出现了纵向滚动条,横向滚动条也出现了(只能滚动一点点),其实宽度是足够显示的。 然后将问题在网上搜寻,查到了相关的issues https://github...
出现水平滚动条,响应式div
div{ width:100%; min-width: 500px; min-height: 20px; height: 40%; //上面四行作用,缩小浏览器,div会对应变小 overflow: scroll; ...
关于winform的textBox的水平滚动条
1 首先你得先设置该textBox为多行。 2 wordWrap是默认是自动换行的,也就是默认为true。 3 在设置水平滚动条时,一定先设置自动换行wordWrap为false。 this.TxtBox_ApercuFichier.Multiline = true; this.TxtBox_ApercuFichier.WordWrap = false; this.Txt
elementUI - tree横向滚动问题
我想有用elementUI的人,有用到tree组件应该或多或少都有可能碰到tree节点过多需要横向滚动显示吧,但是组件文档上没有~而且百度上也少得可伶。 昨天也碰到这问题,后面在技术群里有人回答,我觉得这种问题应该记录下。 亲试这个确实能支持横向滚动,但是在我自己项目中却不生效,我也不知道啥情况。后面根据这样的css把设置在 .el-tree-node的样式往上层提升到 ....
关于宽度100% 出现横向滚动条的问题 以及注意您的显示器...
今天在做题的时候遇到这样一道题: 看一下感觉不难,然后就撸起来了。大体采用绝对定位,ie的盒模型(比标准盒模型好酸多了),感觉应该没啥问题的,走你-> 主体代码是这样的: *{ margin: 0; padding: 0; } html,body{ height: 100%; } heade
移动端浏览器禁止出现横向滚动条
html,body{overflow:hidden;overflow-y:auto;} 亲测,问题已解决
关于element-ui中使用el-scrollbar包裹el-tree时横向滚动条不显示的问题
在全局style中给节点文字父元素加padding撑开,然后设overflow为visible即可 .el-tree-node :nth-child(2) { padding: 1px; overflow: visible; }
上下滚动条横向联动滚动
样式内容<style type="text/css"> /*Table样式,无关紧要*/ #MyTable { width: 500px; height: 250px; border-collapse: collapse; bo
Swiper 内容超出添加横向/纵向滚动
在使用Swiper做移动端内容切换时,有些swiper-slide节点中的内容超出节点的宽度或高度,想要在swiper-slide节点中添加滚动条,当滚动条滚动到节点的顶部/左侧时切换上一个swiper-slide节点,当滚动条滚动到节点的底部/右侧时切换下一个swiper-slide节点 首先要设置swiper-slide的overflow属性: .swiper-slide { ...
vue中使用better-scroll实现横向滚动不生效
vue中实现横向滚动不生效,如下图红圈中所示:红圈中的html在seller.vue中的&amp;lt;template&amp;gt;内容如下&amp;lt;div class=&quot;pics&quot;&amp;gt; &amp;lt;h1 class=&quot;title&quot;&amp;gt;商家实景&amp;lt;/h1&amp;gt; &amp;lt;!--因为图片要横向滚动,那么父级就要设定一个固定宽度--&amp;gt; &amp;
图片太大时不会出现横向滚动条
两种方法实现图片超过分辨率但不出现横向滚动条 我们在进行网页页面布局的时候经常会遇到图片大于屏幕的分辨率的问题,如果不进行处理就会出现横向滚动条,十分影响用户的体验,而如果直接将图片宽度设置为屏幕的100%时在进行页面的放大缩小时或者在不同分辨率下图片就会被拉长或者锯断,十分难看,本文就对此提出两种十分简单的解决方法。 第一种简单的思路,就是在img图外层“包”一层(或者多层)标签,然后使这个容器...
body 标签禁止横纵滚动条
全禁止 禁止纵向滚动条 禁止纵向滚动条
两种方式实现横向滚动条
  前言:  在项目开发中,遇到了一个需求,实现一行上的导航栏过多使其产生横向滚动条。一开始做项目,给的时间太短又着急,觉得网上有现成的,去搜发现没有,只好自己去写,一开始用的是平常css+js实现功能,之后学习了flex布局,所以又想到了用flex实现横向滚动条。两种方法,记录下来,供以后借鉴。  正文:   两种方法各有各的好处,如果不考虑兼容性问题,还是用flex吧,毕竟还是喜欢那一句话:W...
Intellij Idea 滚动条跳动的问题
原文地址:http://hualong.iteye.com/blog/2114381 JetBrain系列软件通用不论是开发Java的Intellij Idea,还是前端的WebStorm,还是谷歌基于Idea改造的Android Studio,都有这个问题; 解决方案是把有道词典的两个“屏幕取词”和“划词翻译”两个功能关闭初次使用Intellij Idea 这个java IDE,因为自动保存,因
CSS——水平(横向滚动条)
Document ul { width: 200px; height: 100px; overflow-x: scroll; overflow-y: hidden; white-space:nowrap; /* ul中的内容不换行 */ } ul li { display: inline-block; }
bootstrap栅栏布局下水平滚动条的处理
Bootstrap的栅栏布局,本意是将当前浏览器窗口,划分为12列,来进行自适应,以求达到可以兼容各个大小的浏览器窗口 然而我遇到了,有表格(而且表格特别多列)   需求:需要水平滚动条的 解决办法:只在table上加了滚动条
HTML-设置横向滚动条
        初学HTML,遇到一个题需要将几张图放在一个边框里,并且需要横向拖动        想着很简单,直接在div中设置width、height。并添加属性“overflow:auto;”。但实际运行是发现图片始终会换行,窗口只能上下滚动        后来找到问题的原因,是因为由于在div中直接添加图片,所以图片会适应该div的大小,从而自动换行。而要做到不换行的效果,则需要在div中...
ios scroll滚动问题
当一个大容器里面有个横滚动,大容器本身是竖滚动。在ios中,当touch到横滚动时,大容器不能竖滚动了。。在移动端的overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch;...
微信小程序之scroll-view横向滚动不能显示
之前在写scroll-view(可滚动视图区域)遇到一个问题,花一点时间记录分享一下,竖向滚动视图没什么大问题,只需要设置height:rpx; 滚动高度区域,然而横向滚动区域就需要注意两个问题了。 (一)实现效果 (二)注意设置两个属性 一开始以为只要照着微信官方的文档介绍就可以想怎么写就怎么写了,结果一直调试不出来,按照官方介绍的属性设置了,子元素容器会各占一行,而且,父元素容器会内...
Intellij Idea如何快捷地使窗口左右横向滚动
Intellij Idea是个非常优秀的IDE,其特点之一是丰富的自定义配置,包括海量的快捷键等。它的快捷键设置方式也非常多样化,键盘、鼠标、鼠标加键盘样样都有。背景写这篇文章的背景呢,是我在用Intellij Idea写python的时候,有几行代码写得比较长,想要看全就必须拖动下方的滚动条来横向滚动,感觉非常麻烦。想起以前用photoshop的时候,滑动鼠标滚轮可以上下滚动,按住ctrl再滑动...
MUI滚动组件-scroll 横向滚动图片一半解决办法
MUI滚动组件-scroll 横向滚动图片一半解决办法
iframe横向滚动条的问题
在主页面加 iframe scrolling="yes" 或 "auto" 去掉子页面里的<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 横竖都去掉<iframe scrolling="no"> 想到设置b
jqgrid开启横向滚动条
在设置option属性里面添加 autowidth:true, shrinkToFit: false, autoScroll: true, 即可开启
移动端去除横向滚动条问题,兼容ios
问题描述:已经设置: .selector::-webkit-scrollbar { display: none }在浏览器上面横向滚动条已经消除,安卓上面也消失了,但是ios上面仍然有解决办法:原理:ios无法直接让滚动条隐藏::-webkit-scrollbar {display: none;}是没有用的,所以我的思路就是让滚动条离远点超出父元素的范围,在通过隐藏父元素的超出部分让滚动条消失。由...
html 页面放大以后 怎么出现横向滚动条
使用overflow-x: auto;
解决页面滚动条出现和消失的过程页面会横向移动的问题
平时我们看一些网页刚开始加载的时候没有多少内容,页面也没有出现纵向滚动条,当我们点击加载更多,页面内容高度超过一屏于是出现滚动条,这个时候,页面会向左横向移动一段距离,正好是滚动条的宽度,这是因为滚动条的出现占据了原本属于内容显示区的空间,自然内容就会被挤到左边去,毕竟这是一个很不好的体验,那么有什么好的解决方案呢? 这里我们可以借助css3 的语法: calc(): 用于计算,IE9+浏览器
【CSS】IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug
 管在项目中测试人员已经慢慢淡化了IE6的测试,但是IE7依然还是要纳入测试范围。 最近碰到一个IE7的蛋疼bug,在页面上设置了一个局部的滚动区域,在拖动滚动条的时候,滚动区域内设置了相对定位或绝对定位的元素不随滚动条移动位置。 蛋碎了一地... 在网上查了下看看大家都是怎么破这个问题的,发现这个问题居然也是个普遍问题,好吧。 解决方法: 如果 .scrollerArea{}
使用CSS样式position:fixed水平滚动的方法
这篇文章主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下 使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置。position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了。有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定
div 滚动条 横向 竖向
overflow:scroll overflow-x:scroll overflow-y:scroll
导航出现横向滚动条
&amp;lt;ul class=&quot;navs-title&quot;&amp;gt;     &amp;lt;li class=&quot;nav-li active&quot;&amp;gt;跑步&amp;lt;/li&amp;gt; &amp;lt;li class=&quot;nav-li active&quot;&amp;gt;跑步&amp;lt;/li&amp;gt; &amp;lt;li class=&quot;nav-li&quot;&am
只显示竖滚动条,而不显示横滚动条
style="overflow-x:hidden;overflow-y:auto"
解决JScrollPane水平滚动条不显示的问题
我在JScrollPane中插入了一个JTable,然后不知怎么的不管JTable怎么变大,始终都不能显示水平滚动条. 而且我还设置了 tableScrollPane .setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);tableScrollPane .setVerticalScroll
echarts x轴 增加滚动条
最近blog里面大家都问 x轴类目显示不全问题 如何增加滚动条  下面把我项目中用到的跟大家分享出来  其中红色的代码就是增加滚动条用到的 function (ec) { var myChart = ec.init(document.getElementById('line'));
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 我为什么要学习java 我为什么想学习大数据