html - 使尚未成为响应式轮播

Question

我的问题看起来很简单，但作为初学者我无法弄明白。我写了以下 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>

和CSS:

.container {width: 960px; margin: 0 auto;}
.discs {
padding: 16px 0 16px 0;
border-bottom: 1px solid transparent;
outline: 1px solid #333333;
}

.discs ul li div.arrowleft a, .discs ul li div.arrowright a { background:        url("../i/navelem.png") no-repeat; width: 17px ; height: 37px;}
.discs ul li div.arrowleft a {background-position: 0 -80px;  } .discs ul li div.arrowright a {background-position: -20px -80px;}

.discs ul {
margin: 0;
}
.discs ul li {
display: inline-block;
border: 1px solid #cccccc;
border-radius: 1px;
padding: 2px;
margin: 0 4px;
}

.discs ul li:first-child, .discs ul li:last-child {border: none; padding: 12px; position: relative; vertical-align: 120%;margin: 0;}
.discs ul li:nth-child(2) {margin-left: 0;} .discs ul li:nth-child(8) {margin-right: 0;
}
.discs ul li a  {display: block; background: url(../i/sheetdiscs.png) no-repeat 0 0;    height: 100px; width: 110px;}
.discs ul li:nth-child(3) a {background-position: -126px 0;}
.discs ul li:nth-child(4) a {background-position: -252px 0;}
.discs ul li:nth-child(5) a {background-position: -378px 0;}
.discs ul li:nth-child(6) a {background-position: -252px 0;}
.discs ul li:nth-child(7) a {background-position: -126px 0;}

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

编辑:这是一个 fiddle http://jsfiddle.net/LtwNw/

Answer 1

您好，不要将 px 与宽度一起使用，或者使用其他宽度，例如 %

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