Html 制作尚未成为旋转木马响应的

我的问题看起来很简单，但作为一个初学者，我想不出来。我编写了以下html：

<div class="discs container">
    <ul>
        <li><div class="arrowleft"><a href="#" ></a></div></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><div class="arrowright"><a href="#" ></a></div></li>
    </ul>
</div>

当我缩放网页时，它会跳来跳去，我真的想不出如何让它保持一个整体并做出响应。我试着在尺寸和边距上使用em，但没有效果。如何使其响应

编辑：这是一把小提琴

---

您可以像这样为不同类型的屏幕分辨率设置不同的css，例如，不要使用宽度为%的px或其他东西

 .cotainer{width : 50% ; margin : 0 auto }

---

因为您在容器上放置了固定宽度的960px，所以它不会折叠。你可以用一个百分比，比如

.container{
    width : 80% ;
    margin : 0 auto;
}

这样，旋转木马将是屏幕大小的80%。如果您还没有使用Twitter引导，那么也值得一看。它有一个内置的旋转木马，你可以使用，这将是响应

---

我在你的.disc ul类中放了两行。不确定这是否是您正在寻找的：

.discs ul {
    margin: 0;
    height:106px; /*put whatever height you want */
    overflow:hidden;
}

---

你能发表一篇文章来重现这个问题吗？你说的“缩放网页”是什么意思？你的意思是缩放屏幕，还是改变容器的大小？@Steve是的，我的意思是缩放页面，我试过了，但没用，看我嵌入的fiddle。它仍然在跳跃。此外，我试图脱离框架，因为我坚持这样一条规则，即您首先应该知道如何自己做，以便更好地理解事情：）

.container{
    width : 80% ;
    margin : 0 auto;
}

.discs ul {
    margin: 0;
    height:106px; /*put whatever height you want */
    overflow:hidden;
}