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，但它没有帮助。如何使其响应？

编辑：这是一个小提琴http://jsfiddle.net/LtwNw/

Answer 1

如果没有使用带宽度的px或其他东西，请使用宽度％，例如

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

Answer 2

 @media only screen and (max-width: 767px)

您可以使用这样的方法为不同类型的屏幕分辨率设置不同的CSS

Answer 3

因为您在容器上放置了固定宽度960px，所以它不会折叠。您可以使用像

这样的百分比

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

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

Twitter Bootstrap Carousel

Answer 4

我在.disc ul类中添加了两行。不确定这是否是您要找的：

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

使一个尚未成为旋转木马的响应

4 个答案: