我的网站上有一个 ResponsiveSlides 滑块，我试图让上一个/下一个导航箭头在滑块的左右边缘垂直居中。
他们目前在我调整浏览器大小时四处移动，向右/下一个箭头似乎悬在滑块之外几个像素，并且在 480px 断点周围发生了一些奇怪的事情（一旦你变得比 480px 小一点，滑块就是一个比下面的列宽一点；此外，箭头在屏幕下方更远）。
你可以在这里看到它
js
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$("#slider").responsiveSlides({
auto: true,
pager: false,
nav: true,
});
});
</script>
html
<div class="section group">
<div class="col span_3_of_3">
<ul id="slider">
<li id="1"><img src="assets/slider/buzz-covers.jpg" alt="buzz covers"></li>
<li id="2"><img src="assets/slider/slab-happy.png" alt="slab happy"></li>
<li id="3"><img src="assets/slider/gridbook.jpg" alt="gridbook"></li>
<li id="4"><img src="assets/slider/ninth-spread.jpg" alt="ninth letter"></li>
<li id="5"><img src="assets/slider/slinkster.jpg" alt="slinkster"></li>
<li id="6"><img src="assets/slider/buzz-spread.jpg" alt="buzz spread"></li>
</ul>
</div>
</div>
css（不确定哪些位与我正在做的事情有关，所以这是我的样式表中与滑块相关的所有内容）
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 1.5em 0 0 0;
background-color: #f7f7f7;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides1_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
z-index: 99;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.rslides1_nav:active {
opacity: 1.0;
}
.rslides1_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.rslides1_nav:focus {
outline: none;
}
.rslides_tabs {
margin-top: 10px;
text-align: center;
}
.rslides_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.rslides_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.rslides_tabs .rslides_here a {
background: #222;
background: rgba(0,0,0, .8);
}
