0

My problem seems simple but as a beginner I can't figure it out. I wrote the following 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>

and 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;}

When I scale the web page, it all jumps around and I can't really figure how to make it stay in one piece and be responsive. I tried using em's on sizes and margins but it doesn't help. How do I make it responsive?

EDIT: Here's a fiddle http://jsfiddle.net/LtwNw/

4

4 回答 4

1

嗨，不要使用带宽度的 px 或其他东西，例如使用 % 的宽度

 .cotainer{width : 50% ; margin : 0 auto }
于 2013-07-05T07:57:00.410 回答
0 
 @media only screen and (max-width: 767px)

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

于 2013-07-05T07:55:26.653 回答
0

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

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

这样轮播将是屏幕大小的 80%。如果您还没有的话，也值得看看 Twitter Bootstrap。它有一个内置的轮播，你可以使用它来响应。

Twitter 引导轮播

于 2013-07-05T08:32:50.977 回答
0

我在你的 .disc ul 类中加入了两行。不确定这是否是您要查找的内容：

.discs ul {
    margin: 0;
    height:106px; /*put whatever height you want */
    overflow:hidden;
}
于 2013-07-05T10:19:06.640 回答