bootstrap引用头文件,横向显示列表

最新推荐文章于 2023-11-16 21:49:14 发布

qq_26495107

最新推荐文章于 2023-11-16 21:49:14 发布

阅读量1.5k

点赞数

分类专栏： html前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_26495107/article/details/71106808

版权

html前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!--让IE渲染更好的效果-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <!-- 解决IE9以下的浏览器不支持媒体查询 -->
    <!-- [if lf IE 9]>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif] -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>

横向现实列表代码
<style>
ul{
    display:inline;
white-space: nowrap;
padding:0; 
 }
li{
width:80px;
height:80px;
margin:3px;
/*float:left;*/
background:red;
display:inline-block;
}
div{width:400px;border:1px solid red; overflow-x:scroll;  }

</style>

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>