一个关于ul 及 li 横向滚动的故事！

哎！最近笨人又遇到了关于使用css3实现ul 横向滚动的问题了，知道很简单，突然间想不起来！灰常苦恼，就写下这篇文章来加深记忆！（当然我也在度娘上搜了一波，发现没有满意的答案，就把这篇文章分享给同我一样奋斗在前端岗位上的各位同仁吧！）

来来来！上干货！

结构部分

先写一个包裹层 div
在写一个包裹li的ul
最后写很多li

css部分

用到文本不换行 white-space: nowrap;
用到了元素超出宽度滚动 overflow: auto;
当然还有 li 标签的 display:inline-block;

上代码

<style>*{margin: 0;padding: 0;list-style: none;}html,body{height: 100%;width: 100%;}.box{width:600px;height:100px;}.ul{min-width:600px;height: 100px;white-space: nowrap;overflow: auto;}.ul li{width:100px;height:100px;display:inline-block;margin-right:10px;background:red;}
</style>
<body><div class="box"><ul class="ul"><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>

注意！注意！注意！一定要放在移动端及移动模拟器上运行才起作用哦！！！重要的事情说三遍！

一个关于ul 及 li 横向滚动的故事！相关推荐

解决ul的li横向排列换行的问题
解决ul的li横向排列换行的问题参考文章: (1)解决ul的li横向排列换行的问题 (2)https://www.cnblogs.com/sapho/p/5736491.html 备忘一下.
写了一个图片横向滚动且首尾相接的JS组件
当年我也是从网上down组件直接拿来用的小白. 记得三年前去XM面试的时候,明哥问我: "如果你需要一个页面特效,你怎么做?" 我呆萌的回答说:"网上down一个哦!&q ...
ul li横向排列及圆点处理
如何用CSS制作横向菜单让ul li横向排列及圆点处理第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
vue内容横向循环滚动_vue文字横向滚动公告
需求最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
html 图片自动滚动播放,JS实现图片自动滚动(图片横向滚动)
实带道术用量确示常构端析以要效开的用,近不现的效果就是一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高 ...
vue组件走马灯_vue文字横向滚动走马灯公告代码示例
需求最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
[css] flex 间距 gap 折行滚动（九宫格四宫格横向滚动）
间距 gap 给 flex 布局设置一个 gap 属性,比如说 24 像素,那么 flex 布局下边的每个元素之间,就会有一个 24 像素的空隙 <main><div class=& ...
文字横向滚动，或上下滚动
1.文字横向滚动使用<marquee>标签即可. <marquee><h1 style="margin: 40px; font: 30px Microsoft ...
h5，移动端浏览器通过css 实现页面，元素横向滚动
横向滚动在业务中还是比较常见的,比如我们的有些导航就是横向滚动的. 横向滚动其实通过css就是简单的快速实现核心的代码就是这两行 overflow-x: scroll; 开启滚动 white-sp ...

一个关于ul 及 li 横向滚动的故事！

一个关于ul 及 li 横向滚动的故事！相关推荐

最新文章

热门文章