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

コンテナに 960px の固定幅を配置しているため、コンテナは折りたたまれません。次のようなパーセンテージを使用できます

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

そうすれば、カルーセルは画面の 80% のサイズになります。また、Twitter Bootstrap をまだ見ていない場合は、見てみる価値があります。レスポンシブに使用できるカルーセルが組み込まれています。

Twitter ブートストラップ カルーセル

于 2013-07-05T08:32:50.977 に答える
0

私はあなたの.disc ulクラスに2行入れました。これがあなたが探しているものかどうかわからない：

.discs ul {
    margin: 0;
    height:106px; /*put whatever height you want */
    overflow:hidden;
}
于 2013-07-05T10:19:06.640 に答える
0 
 @media only screen and (max-width: 767px)

このように、さまざまな種類の画面解像度にさまざまなcssを設定するために使用できます

于 2013-07-05T07:55:26.653 に答える