html - 使用 CSS 水平滚动

Question

因此，我正在尝试仅使用 CSS 为客户端完成水平滚动(我知道有很多 JavaScript 库可以帮助实现这一点，但我正在努力避免使用这些库)。

我有一些基本代码(感谢此链接和其中的 JSFiddle 的帮助:CSS horizontal scroll)，但实际上无法使其工作。

这是我尝试使用的示例代码: http://jsfiddle.net/8Bkxh/

HTML:

    <section class="row">
    <div class="scroll-wrap">
        <div class="span4">
            <div class="video-list">
                <div class="vid-thumb-wrap">
                    <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot.png');?> ">

                    <div class="vid-title">
                        <h5>In-Studio Tutorial On Recording</h5>
                        <p>By <a href="#">David Boone</a></p>
                    </div><!-- .vid-title -->

                    <div class="callout upcoming">
                        <p>Purchase Tickets Now!</p>
                    </div><!-- .callout upcoming -->
                </div><!-- .vid-thumb-wrap -->
            </div><!-- .video-list -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="video-list">
                <div class="vid-thumb-wrap">
                    <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot2.jpg');?> ">

                    <div class="vid-title">
                        <h5>[Interview] The Revolution of Individual Production</h5>
                        <p>By <a href="#">Jon Foreman</a></p>
                    </div><!-- .vid-title -->

                    <div class="callout live">
                        <p>Happening Now!</p>
                    </div><!-- .callout live -->
                </div><!-- .vid-thumb-wrap -->
            </div><!-- .video-list -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->
    </div><!-- .scroll-wrap -->
</section><!-- .row -->

CSS:

.row {
    position: relative; 
    width: 960px!important;
}

.scroll-wrap { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 180px!important; 
    white-space: nowrap!important;   
}

---

一定要检查我在那个 JSFiddle 中链接的三个外部资源

---

我想要做的就是允许用户水平而不是垂直滚动这五个元素。

我想我只是在某个地方遇到了精神障碍，我希望这对外面的人来说可能是一个快速解决办法。我真的很感谢任何可能的帮助，我很乐意尽可能地澄清。

谢谢，

基南

Answer 1

我以前遇到过这个问题并通过将内部 div 设置为 display: inline-block 并使用 white-space: nowrap 扩展包含的 div 来解决它你已经做了。

有效，但我不知道为什么您的解决方案不起作用。我很确定我以同样的方式使用它多年，但在某个时候它就停止工作了。

编辑:在 Bootstrap 的情况下，您可能希望明确地将 float 值设置为 none