显示横向滚动条

最新推荐文章于 2023-04-07 11:21:34 发布

weixin_47304385

最新推荐文章于 2023-04-07 11:21:34 发布

阅读量555

点赞数 1

分类专栏： css页面布局文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_47304385/article/details/125129818

版权

css页面布局专栏收录该内容

13 篇文章 0 订阅

订阅专栏

给父级添加overflow-x:auto超出自动显示滚动条这样就可以实现了(前提是需要给父级指定宽度)

<style>
 div{
            width: 390px;
            height: 44px;
            background: pink;
            overflow-x: auto
        }
        ul{
            width: 1000px;
            height: 44px;
            background: #3E98F0
        }
        ul li{
            width: 100px;
            height: 44px;
            float: left;
            text-align: center;
            line-height: 44px;
            font-size: 12px;
            color: #fff
        }
    </style>
    <body>
    <!-- pc端滚动条是占位置的 移动端不占位置 -->
    <div>
        <ul>
            <li>首页1</li>
            <li>首页2</li>
            <li>首页3</li>
            <li>首页4</li>
            <li>首页5</li>
            <li>首页6</li>
            <li>首页7</li>
            <li>首页8</li>
            <li>首页9</li>
            <li>首页10</li>
        </ul>
    </div>
</body>