0

これは基本的なWeb101に戻ると確信しており、質問するのは恥ずかしいと思いますが、画像の下に設定した注文番号リストがあります。いずれかの数字をクリックすると、画像が別の画像に変わります。

ブラウザウィンドウのサイズを変更するまで、すべてが完璧に機能します。数字は現在の場所に残り(位置は相対的です)、その他はすべてページの中央に移動します(これを実行したいため)。

ライブページへのリンクは次のとおりです-http://thewiredlife.net/kelseytest/fish.html

<div id="sectionwrap" class="svw">
<ul>
<li><img src="images/fish_full.png" width="1024" height="602" alt="fish"></li>
<li><img src="images/fish_full_2.png" width="1024" height="602" alt="jj"></li> 
</ul></div>

#sectionwrap {
width: 1024px;
height:340px;
margin-left: auto;
margin-right: auto;
margin-top:20px;}

.svw {width: 50px; height: 102px;}
.svw ul {position: relative; left: -999em;}

.stripViewer {
position: relative;
overflow: hidden;
margin: 0 0 1px 0;
}
.stripViewer ul
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li {
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
}
.stripTransmitter ul {
margin-top:6px;
margin-left: 60px;
padding: 0;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font-family: 'OpenSansLight', Helvetica, Arial, sans-serif;
font-size:14px;
text-align: center;
line-height: 22px;
color: #BCBCBC;
text-decoration: none;
display: block;
}

ウィンドウのサイズが変更されたときに、数字を残りのコンテンツに従わせるための解決策はありますか?ありがとう :)

4

1 に答える 1

0

まず、あなたの番号はあなたが上に投稿したクラスに含まれていません。あなたの情報源を見てください。あなたの番号は中にありstripTransmitter0ます。それらの数字をもう少し目立たせることをお勧めします。第二に-あなたはそれにwitdhを与えました、今ちょうどのようmargin: 0 autoに中央にを追加します。stripTransmitter0sectionwrap

于 2013-02-04T14:59:54.617 に答える