使用弹性盒子写移动端的横向和纵向滚动条效果

前端小灰灰

于 2023-03-11 16:31:05 发布

阅读量617

点赞数 2

文章标签： html html5 css

本文链接：https://blog.csdn.net/dongjianhui15/article/details/129464618

版权

本文介绍如何利用弹性盒子布局在移动端创建横向和纵向滚动条效果。通过示例代码分享了横向滚动条及纵向滚动条的HTML和CSS实现方法，并提供了效果图展示。

摘要由CSDN通过智能技术生成

我们在平时做开发的时候基本上都是纵向滚动条，今天在开发一个移动端页面遇到一个横向滚动条的效果突然感觉有点麻烦了。好好找了一下资料之后发现了比较简单的方法，今天分享给大家。

横向滚动条的html代码如下：

<body>
    <header></header>
    <main>
        <nav>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </nav>
        <ol>
        </ol>
    </main>
    <footer></footer>
</body>

css代码

*{
    margin: 0;
    padding: 0;
}
html{
    font-size:

最低0.47元/天解锁文章