[CSS] ul列表水平X轴滚动，各种元素水平滚动（兼容IE）

末蓝、 2022-02-28 12:00 328阅读 0赞

备忘：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1,#d2{width: 800px;margin: 100px auto;}
          
            ul,#d2{           /*最外层父元素*/
                max-width: 400px;
                padding: 0 15px;
                border-bottom: 2px solid #d1e4ec;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
            }
            li ,#d2>div{
                display: inline-block;
                margin-right: 10px;
            }
            li>a {
                display: block;
                text-decoration: none;
                font-size: 16px;
                padding: 8px 15px;
                color: #3d3d3d;
            }
        </style>
    </head>
    <body>
    
    <div id="d1">
        <ul>
            <li><a href="#">aaa</a></li>
            <li><a href="#">bbb</a></li>
            <li><a href="#">ccc</a></li>
            <li><a href="#">ddd</a></li>
            <li><a href="#">eee</a></li>
            <li><a href="#">fff</a></li>
            <li><a href="#">ggg</a></li>
        </ul>
    </div>
    
    <div id="d2">
        <div>111111</div>
        <div>222222</div>
        <div>333333</div>
        <div>444444</div>
        <div>555555</div>
        <div>666666</div>
        <div>777777</div>
        <div>888888</div>
    </div>
    
    </body>
    </html>

IE下效果图：

![在这里插入图片描述][20190325183654711.gif]

[20190325183654711.gif]: /images/20220228/a3e118eb241d4461afb32942fa4d7840.png

发表评论取消回复

表情：

评论列表（有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery水平时间滚动轴代码

[下载地址][Link 1]jQuery实现的水平时间轴效果，这个横向时间轴可以点击左右两侧箭头进行横向滚动显示更多，可以用在公司发展历程等场景。 ![16312778

以你之姓@/ 2022年09月11日 02:29/ 0 赞/ 166 阅读

相关 CSS 添加水平滚动条

> 属性： div \{ width:150px; height:150px; overflow:auto; \}　　overflow属性如下: > 　　auto：当此di

ゞ浴缸里的玫瑰/ 2022年09月10日 00:08/ 0 赞/ 263 阅读

相关 android 水平滚动ScrollView： HorizontalScrollView

这是一个水平滚动的例子. main.xml HorizontalScrollView 对应的是Horizontal布局应用的. ![Center][] 看代

今天药忘吃喽~/ 2022年07月29日 09:07/ 0 赞/ 232 阅读

相关 marquee插件水平滚动字幕循环滚动

效果图： ![这里写图片描述][SouthEast] demo及插件下载链接： [http://download.csdn.net/download/vlilyv/

今天药忘吃喽~/ 2022年06月10日 13:24/ 0 赞/ 229 阅读

相关设置QtreeWidget水平滚动条

转载请注明出处：http://blog.csdn.net/neochan1108/article/details/78031710 //设置treewidget水平滚动条

我就是我/ 2022年06月08日 07:48/ 0 赞/ 774 阅读

相关 css3水平滚动

.marquee { height: 2rem; width: 100%; line-height: 2rem; bac

绝地灬酷狼/ 2022年05月14日 04:53/ 0 赞/ 207 阅读

相关安卓可水平滚动列表 HorizontalListView

可水平滚动 listview 原来作者地址 http://www.dev-smart.com/archives/34 我上传的DEMON： http:

深藏阁楼爱情的钟/ 2022年04月10日 08:56/ 0 赞/ 307 阅读

相关 [CSS] ul列表水平X轴滚动，各种元素水平滚动（兼容IE）

备忘： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

末蓝、/ 2022年02月28日 12:00/ 0 赞/ 329 阅读

相关设置jqGrid水平滚动条

1.html设置css样式 <style> .ui-jqgrid .ui-jqgrid-bdiv \{ border-

分手后的思念是犯贱/ 2021年09月27日 16:06/ 0 赞/ 596 阅读

相关 jqgrid 添加水平滚动条

<div style="overflow-x:auto"><table id="treegrid2"></table></div> 通过设置： shrinkToFit:fa

小灰灰/ 2021年05月12日 11:50/ 0 赞/ 551 阅读