关于我的overflow-x

最新推荐文章于 2022-05-29 15:08:29 发布
最新推荐文章于 2022-05-29 15:08:29 发布
阅读量239 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bobringtheboys/article/details/104043748
版权

今天在写项目的时候发现一个很奇怪的事情,那就是我的横向滚动条怎么也没办法出来,大概的结构如下

我想让li出现横向的滚动条,
css代码如下:
给ul设置横向超出滚动条,超出不换行,纵向隐藏
然后页面显示如下:
很明显,我的设置效果并没有出来,代码没有生效
然后我把li中的float:right注释掉换成display:line-block就好了.
修改后的css样式如下:
在这里插入图片描述
然后页面中的ul也成功的出现了横向滚动条
在这里插入图片描述
总结:在ul中li出现想要出现横线滚动条但是效果失效的情况下,不妨试着将li转换为行内块级元素

可能是我css没有学到位,其中的原理我不懂,只能算瞎猫碰上死耗子出来了.嘿嘿
在这里写一个博客记录一下,h5小白的日常 …
日常报错一错就是一天 …
我会努力的!

bobringtheboys
关注
再了解CSS中的overflow以及应用场景
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
09-27 1万+
创作不易 拒绝白嫖 点个赞呗 关注专栏 学透CSS,带你走进CSS的深处！！！ 前言 网页的设置在很多时候并不是正好满足一页，拿我们经常用的掘金来说，因为使用了数据的分页加载，如果你想看更多的文章的话，需要不停的往下滑动，在浏览器的右边会一直存在着一个滚动条，这就是这篇文章想要了解的元素。在网页中当一页无法容纳所有的数据的时候，我们经常使用overflow来进行设定。 overflow overflow 是overflow-x 和overflow-y的简写，用来设定当一块级元素（通常设置了height/.
element-ui的NavMenu置于顶部(mode="horizontal")时,让菜单可以滚动(overflow-x:auto)(主要用于移动端的菜单显示)...
weixin_30616969的博客
05-29 3039
说实话，写样式看似简单，其实有时候也会遇到很多坑。留下一笔，供参考（有点啰嗦，可以直接拖到最后看最后两行）。 这次是做一个PC端和移动端同时适用的项目，菜单的展示就成了一个问题。 　　于是我判断了用户设备（具体见本人的另一篇随笔：https://www.cnblogs.com/nuonuo-D/p/10516626.html），设了一个变量isMobi（移动端值为true,PC端值为...
使用CSS的overflow属性防止float撑开div的方法
09-24
我们在使用float设定浮动元素的时候经常会遇到撑破div的情况,其中一种解决方法即是利用overflow: hidden,这里我们就来看一下使用CSS的overflow属性防止float撑开div的方法:
mysql overflow 存储_MySQL-->基础-->002-->MySQL存储引擎
weixin_29344293的博客
02-06 375
mysql的存储引擎主要有：MyISAM和InnoDBMyISAM和InnoDB的主要区别：InnoDB支持事务和参照完整性(即为主键约束，数据库的主键和外键类型一定要一致)存储引擎是针对表而言而非针对数据库而言的，这点很重要！我们可以根据不同的表选择不同的存储引擎，如mysql数据中，默认的mysql这个表，存储引擎就是MyISANstackoverflow上的一段话：The main diff...
MySQL 5.7-11.1.7 Out-of-Range and Overflow Handling(超出范围和溢出处理)
tangwenqiang177的专栏
10-29 512
When MySQL stores a value in a numeric column that is outside the permissible range of the column data type, the result depends on the SQL mode in effect at the time: 当MySQL在数值列中存储一个值时，该值超出了列数据类型的允许范围，结果取决于当时有效的SQL模式: If strict SQL mode is enabled, MyS
MySQL Notes for Professionals-Stack Overflow出品
loongshawn的博客
01-08 438
Stack Overflow最为全球最火的IT问答社区，2018年出品了一本Mysql书籍《MySQL Notes for Professionals》
overflow-x: auto左右滚动只能移动端；overflow-y: scrool；auto*上下pc端也行
weixin_60508127的博客
03-13 1473
div { width: 650px; height: 520px; /* overflow: auto; */ position: relative; margin: auto; overflow: hidden; } body::-webkit-scrollbar { ...
微信小程序overflow:auto; ios设备卡顿问题
01-03
我们在开发微信小程序的时候，经常会使用到overflow...友情提醒：我推荐你使用微信小程序scroll-view组件实现局部滚动功能，scroll-view微信已经做好了兼容问题，不会出现这种不兼容的问题。用的时候记得给height设值哦
overflow-y: scroll;横向滚动示例
最新发布
06-02
抱歉，我之前的回答有误，`overflow-y: scroll;` 是用来设置元素的垂直滚动条，而不是水平滚动条。如果需要水平滚动条可以使用 `overflow-x: scroll;`，若需要同时控制水平和垂直滚动条，则可以使用 `overflow: ...
cocos2d-x 3.6创建项目代码
08-12
4. **社区求助**：如果遇到无法解决的问题，可以参考cocos2d-x社区论坛，或者在Stack Overflow等平台上提问，分享错误信息，寻求其他开发者帮助。 在文件名称列表中的"CreatCocosProject"可能包含了创建项目的示例...
ul li内容宽度的问题的解决方案
09-25
在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
给元素添加overflow：auto时滚动条出现但是没有滚动效果
weixin_46389242的博客
11-12 3463
项目中用到一个下拉框进行模糊搜索，给ul添加overflow：auto，当元素溢出出现滚动条，但是滚动条出现了，却不能滚动，后面发现把body的height：100%修改成固定值的时候一切正常
css滚动条不占用宽度_CSS 中 关于 Overflow，你需要了解的这些知识点
weixin_39819283的博客
11-27 3305
在CSS中，当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。在本文中，将会介绍这些属性，然后我们将一起深入讨论与overflow相关的一些概念和用例。你准备好了吗？get it!简介要使用overflow属性，我们需要确保将其应用到的元素具有以下特征：块级元素(例如:div、section)，通过...
overflow出不来游览器滚动条的问题
qq_40946374的博客
01-08 1998
overflow不显示滚动条是因为position的fixed属性
关于overflow-x:scroll无法正常显示的疑问
qq_64071349的博客
05-29 1147
如下图，按理说，我设置了 overflow-x:scroll; 应该会有水平滚动条来操作 但是出现的效果是 ：有水平滚动条，但它不能移动，出现效果与hidden类似 后来观看其他代码：看到要用white-space这一属性 它的属性值为： 因此我需要用到nowrap属性值 这样才能让我的 文本 的全部内容在一行内全部显示，这时我的水平方向滚动条才会起作用 改正如下： ...
解决ul下的li换行问题，（父元素div加overflow：scroll没作用的问题）
dianlupeng4187的博客
02-01 572
#left, #right { width: 50%; box-sizing: border-box; min-height: 100%; float: left; overflow: scroll;//必须写} #left ul{ float: left;//必须写 display:flex;//必须写}#left ul > li { ...
CSS ul 横向滑动并超出屏幕可滑动
weixin_45533739的博客
01-19 3158
方案一： 第一步 ul 中的css设置 <ul id = "list"> </ul> #list { overflow-x: auto; //设置x轴可滑动 list-style: none;//去掉li上的小点 white-space:nowrap;//元素不换行 width: auto;(宽度) } 第二步 li中的css设置 <li class = "item"> .item { margin-left: 20px; //每个li设置间距为20px display:
CSS中父div中overflow和子div中float的用法
nwpu_geeker的博客
01-08 2560
前言本人在项目中遇到显示user列表信息时需要显示如下图所示的效果，因此学习了css样式中overf和float的简单使用。 需求描述：如何把一个单元的内容信息显示在一行，并且可以控制一行有几个单元。一个例子<div class="container "> <div class="fruit"> <div>苹果</div>
html scroll无效,css div设置overflow-x: scroll 横向滚动无效
weixin_42172204的博客
06-03 2012
我给最外层div设置了overflow-x: scroll想要里面的span超出时横向滚动 发现效果依然是上下滚动 请问这个种情况该如何布局html满999减40满999减40满999减40满999减40满999减40满999减40满999减40css.shopCouponBor {width: 450px;height: 30px;float: right;overflow-x: scroll;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值