Question

我有一个网站，不同的图片是彼此相邻放置的，所以我有一大堆图片。在特定宽度后，这些图片不可见。

当我创建网站时，我可以使用overflow-x:visible;来显示滚动条。这是我需要的解决方案，我想要的。我刚刚更新了网站的内容，看到滚动条在页面加载后消失了。

问题是，没有滚动条，没有人可以在右边访问图片。如何强制浏览器始终显示滚动条？ overflow-x:scroll;无效。

HTML

<section class="scroll">
                <ul class="detail-images-list">
                    <li>
                        <article class="image-detail">
                            <img src="../bilder/gallery-10/1.jpg">
                        </article>
                    </li>
                    <li>
                        <article class="image-detail">
                            <img src="../bilder/gallery-10/2.jpg">
                        </article>
                    </li>
                    <li>
                        <article class="image-detail">
                            <img src="../bilder/gallery-10/3.jpg">
                        </article>
                    </li>
                    <li>
                        <article class="image-detail">
                            <img src="../bilder/gallery-10/4.jpg">
                        </article>
                    </li>
                </ul>
            </section>

CSS

.scroll {
overflow-x:scroll;
overflow-y:hidden;
height:51.5em;
min-width:100%;

}

Answer 1

.scroll {
overflow-x:scroll;
overflow-y:hidden;
height:51.5em;
min-width:100%;
}

将min-width变为width。

如果你不限制元素的宽度，它会随着内容的增长而增长，因此不需要滚动。

Answer 2

http://jsfiddle.net/4C3UQ/

检查一下。我在其中添加了一些文字，以便您可以看到会发生什么。我使用了overflow-x: auto;，以便浏览器在需要时自行完成。如果你现在把图像放在这里，它应该可以工作。

溢出x消失但不应该消失

2 个答案: