我有一个我无法解决的定位问题......
我使用JQuery Cycle Plugin生成了一个JQuery滑块,我尝试添加一些导航项目符号,这些项目符号应位于幻灯片的中间。但由于某种原因,<div id="nav">
不响应正常的定位元素......
我的HTML看起来像:
<div class="homepage-slider">
<ul class="slider-elements">
<li><img src="http://path/to/my/image.jpg" /></li>
<li><img src="http://path/to/my/image.jpg" /></li>
<li><img src="http://path/to/my/image.jpg" /></li>
</ul>
<div id="nav" class="homepage-slider-navigation">
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
CSS:
.homepage-slider {
position: relative;
text-align: center;
}
.homepage-slider #nav {
position: absolute;
width: auto;
display: inline-block;
margin-top: -60px;
z-index: 9;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.homepage-slider #nav a {
background: url('images/slider_navigation.png');
background-position: -22px 0px;
background-repeat: no-repeat;
text-decoration: none;
float: left;
width: 22px;
height: 22px;
}
.homepage-slider #nav a.activeSlide {
background: url('images/slider_navigation.png');
background-position: 0px 0px;
background-repeat: no-repeat;
}
我尝试过margin: auto
,text-align: center
,position
之类的内容,但我觉得我在这里遗漏了一些东西。有人可以帮助我吗?
答案 0 :(得分:0)
删除div ID中的“#”:
<div id="nav" class="homepage-slider-navigation">