Question

我确信这可以追溯到基本的网络101，我感到很惭愧，但我有一个有序的数字列表，我已经在图像下设置了。单击任何数字时，图像将更改为其他图像。

一切都很完美，直到我调整浏览器窗口大小 - 数字保持原样（它们的位置是相对的），其他一切都移动到页面的中心位置（因为我希望它能做到这一点）。

以下是指向该网页的链接 - 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;
}

在调整窗口大小时，任何使数字跟随其余内容的解决方案？谢谢:)）

Answer 1

首先 - 您的号码不在您上面发布的课程中，请查看您的来源。您的号码在stripTransmitter0内。我建议让这些数字更加突出。第二个 - 你已经给了它一个机智，现在添加一个margin: 0 auto到中心stripTransmitter0，就像sectionwrap一样。

拉伸浏览器窗口时防止有序列表移动

1 个答案: