在滑块中定位导航问题

时间:2013-05-23 14:11:46

标签: css positioning

我有一个我无法解决的定位问题......

我使用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: autotext-align: centerposition之类的内容,但我觉得我在这里遗漏了一些东西。有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

删除div ID中的“#”:

<div id="nav" class="homepage-slider-navigation">