0 130 2022-10-26 11:47:29
收藏
<style>
.big{
width:100%;
overflow: hidden;
}
.medium{
width:100%;
overflow-x:scroll;
}
.small{
width:max-content;
}
li{
display: inline-block;
margin-right:10px;
}
</style>
<div class="big">
<h2>栏目名</h2>
<div class="medium">
<ul class="small">
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
</ul>
</div>
</div>
<style>
.big{
width:100%;
overflow: hidden;
}
.medium{
width:100%;
overflow-x:scroll;
white-space: nowrap;
}
li{
display: inline-block;
box-sizing: border-box;
font-size:24px;
}
</style>
<div class="big">
<h2>栏目名</h2>
<ul class="medium">
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
</ul>
</div>
本文地址:https://xzo.com.cn/develop/js/1115.html
如果您认可我们的分享,有意与我们合作开展帝国cms网站建设与开发业务或插件定制,请联系右侧在线客服。我们能给您的,就是高质量的模板与售后。
标注了信息来源为下载鸥的文章皆为原创,如果是转载的优质文章,我们也都标注了出处。如果您喜欢我们的文章,请按照下载鸥所标注的文章出处进行标注,谢谢您的配合。
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。
在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...
什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...
在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...
知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...
jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...
今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...
通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...
通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...
通过jQuery控制视频播放是非常方便的,如果要弹出视频,该如何开发呢?...
但如果使用的js库比较多,且其他JavaScript框架也使用$符作为简写,二者一见面...
jQuery是非常常用的jQuery库,也是可以操作缓存的。那么,我们要怎样操作缓存呢...
在js动态加载数据时,要如何通过jQuery库来触发点击事件呢?...
在一些业务中,我们需要不刷新页面重载或加载js脚本,此时可以怎样实现呢?...
swiper是一款非常常用且好用的轮播插件,但默认是没有显示3.5个(半个)轮播图的...
客户对于视频是有执念的,很多客户喜欢将banner图用视频做背景。pc端自然没有...
如果直接通过css3的left属性,实现的滑动效果并不丝滑。此时,如果给图片加入父...