css - 全屏 Li 水平滚动元素无法正常工作

Question

我正在尝试创建响应式全屏水平图库滚动。我已经解决了，但结果并不好。实际上，图像应该完全拉伸(stretch)到 1 里。我在垂直滚动。其次，li 在 firefox 上运行不佳，但在 chrome 上运行良好。请帮忙。谢谢。我的代码片段

    ul {
        display: inline-block;
        height: 100px;
        white-space: nowrap;
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;          

        max-height: 100%;
        width: 25%;

    }

这是 fiddle FIDDLE

谢谢。

Answer 1

demo with li.image = 25%

Full li image demo

body {
        width:100%;
        margin: 0;
        padding: 0;
    }

body 标签中缺少width

请记住，slides 类上的 width: 100%; 将不起作用，除非该类的父级在其中定义了 width( 这里是 body )!!