显示比窗口更宽的内联响应列表答案

【问题标题】：Display responsive list inline wider than the window显示比窗口更宽的内联响应列表
【发布时间】：2015-08-25 02:59:28
【问题描述】：

我想在我的网站上制作一个无限滑块。我试图做的是制作一个无序列表的元素，其中列表项将是单个幻灯片。我遇到了让列表项内联显示并允许通过浏览器的左右两端溢出的问题，同时还保持列表项响应以便它们按比例缩小。我已经尝试了我在 SE 上可以找到的所有东西，甚至向我的全栈开发人员朋友寻求帮助，但没有运气。

<section>
    <hr class="pad2">
    <ul id="slide-show">
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
        <li>
            <div class="arrow-left"></div>
            <img class="world-map" src="/images/passport/world_map.jpg">
            <div class="arrow-right"></div>
        </li>
    </ul>   
    <hr class="pad2">
</section>



.world-map {
    height: auto;
    width: 95%;
    margin-left: 2.5%;
    display: inline-block;
}

#slide-show {
    -webkit-transition: -webkit-transform 2s ease-in-out;
    overflow: hidden;
}

#slide-show li {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    position: relative;
    display: inline;
    float: left;
    list-style-type: none;
}

.arrow-left {
    height: 12%;
    width: 2.5%;
    display: inline-block;
    float: left;
    background-color: black;
    top: 44%;
    position: absolute;
    cursor: pointer;
}

.arrow-right {
    height: 12%;
    width: 2.5%;
    display: inline-block;
    float: right;
    background-color: black;
    top: 44%;
    position: absolute;
    cursor: pointer;
}

这个想法是，一次只有一个列表项会出现在屏幕上，左右箭头会将#slide-show 滑过以允许其他幻灯片进入视图。

【问题讨论】：

在这种情况下你需要明确地给它一个width

标签： html css

【解决方案1】：

我更新了几行 css，我相信这就是你要找的：

#slide-show {
    -webkit-transition: -webkit-transform 2s ease-in-out;
    overflow: hidden;
  white-space: nowrap;
}

#slide-show li {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    position: relative;
    display: inline-block;
    list-style-type: none;
}

这是一支工作笔：http://jsbin.com/copugojapa/1/edit

更新：这是滑块的功能演示 - 您可能想用您的（更快的）代码替换 js：http://output.jsbin.com/jorucexeza/

【讨论】：