当前位置:  开发笔记 > 前端 > 正文

防止包装容器(span或div)

如何解决《防止包装容器(span或div)》经验,为你挑选了2个好方法。

我想将一组固定宽度的div元素放入容器中,并显示水平滚动条.div/span元素应按照它们在HTML中出现的顺序从左到右显示在一行中.(基本上没有包装)

这样,水平滚动条将出现,可以用来代替垂直滚动条来读取内容(从左到右).

我已经尝试将它们放在一个容器中,然后在容器上放一个"white-space:nowrap"样式,但是唉,它似乎还在包装.想法?

它看起来像这样:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}
Some content
More content
Even More content!

更新:请参阅网站以获取示例,但他们错误地认为不是另一种方式 - 我确信文章已经过时了.



1> Ron DeVera..:

试试这个:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}
Some content More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Even more content!


2> Demolishun..:

它适用于此:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

我原来做的float : left;并且阻止它正常工作.

感谢您发布此解决方案.

推荐阅读
sx-March23
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有