DIV内部滑动

最新推荐文章于 2024-05-08 10:05:10 发布

weixin_30699831

最新推荐文章于 2024-05-08 10:05:10 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanlibingfeng/p/11549321.html

本文深入探讨了CSS中灵活运用.boxli及.box2li类进行布局的技巧，通过具体实例展示了如何利用display属性、flex布局以及宽度和高度设置来实现响应式和自适应的设计。文章还介绍了如何使用:nth-child选择器来交替背景颜色，增强了视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.box li,.box2 li{
    width: 100px;
    height: 30px;
    display: inline-block;
    background: red;
}
.box li:nth-child(2n),
.box2 li:nth-child(2n){
    background: blue;
}
        
.box{
    width: 300px;
    white-space: nowrap;
    overflow-x: auto;
    border:1px solid #999
}
        
.box2{
    width: 300px;
    overflow-x: auto;
    border:1px solid #999
}
.box2{
    display: flex;
}
.box2 li{
    flex-shrink:0
}

<ul class="box">
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

<ul class="box2">
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>