0

我有一组与 Zurb Foundation 的 Orbit javascript 滑块一起提供的 css 项目符号。项目符号有一个 float:left 是必要的，以便在引入新幻灯片时它们水平排列。删除浮动将它们垂直堆叠....

遗憾的是，我需要将项目符号垂直放置在我的页面上“到像素”，而且我在使用各种浏览器时遇到了问题，不得不使用特定于浏览器的 css。我转向 jqueryUI 根据上面的 Div 定位我的项目符号，但有几个问题。

项目符号需要定位在滑块下方的中心......并且滑块会随着页面流畅地调整大小。JqueryUI 可以在页面加载时定位项目符号，但在调整大小时，由于项目符号上的浮动，定位会被搞砸......

只是想知道是否有人能想到一个解决方案……我已经被难住了一段时间，哈哈。提前感谢您的帮助！

我创建了一个带有 2 个 div 的基本 jsfiddle 来演示这种情况。 http://jsfiddle.net/KRTYd/2/ 

<div id="slider">
    <img src="http://www.hdwallpaperspot.com/wp-content/uploads/2013/02/nature-background-wallpaper.jpg" style="width:100%;"></img>
</div>
<div id="bullets"></div>

具体的html是这样的：

<ul data-orbit>
  <li>
    <img src="../img/demos/demo1.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo2.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo3.jpg" />
    <div class="orbit-caption">...</div>
  </li>
</ul>

子弹CSS看起来像这样：

.orbit-bullets {
  overflow: hidden;
  position: absolute;
 }
  .orbit-bullets li {
    display: block;
    width: 18px;
    height: 18px;
    background: #ffffff;
    float: left;
    margin-right: 6px;
    border: solid 3px #666666;
    -webkit-border-radius: 1000px;
    border-radius: 1000px; }

并且由于 html 中指示了多个幻灯片，因此 javascript 生成了多个 css 项目符号。

4

2 回答 2

1

我看起来很熟悉，我想我已经回答了这个问题。

无论如何，#bullet {margin:auto;}而不是漂浮会做到这一点。

http://jsfiddle.net/yAgdT/

但我不相信一旦你有很多 img 可以滑动，它会为滑块做。 #bullets应该成为子弹的父母 http://jsfiddle.net/yAgdT/1/

这些都是假设，因为我们不知道什么会滑动以及你想用子弹做什么:)。

也许更有用的东西，在成为滑块的路上可能：http: //jsfiddle.net/yAgdT/2/

否则，这是我玩的一个滑块，我用盒子阴影制作子弹。它在没有 javascript 的情况下运行。 http://dabblet.com/gist/4323453这不是一个分析器，但你可能会感兴趣的 html 结构。如果您希望中继 CSS 选择器。

于 2013-06-18T15:26:48.793 回答
1 
.orbit_bullets{
    text-align:center;
    list-style:none;
    width:100%;
    display:block;
}

.orbit_bullets li {
    width: 18px;
    height: 18px;
    background: #ffffff;
    display:inline-block;
    margin-right: 6px;
    border: solid 3px #666666;
    -webkit-border-radius: 1000px;
    border-radius: 1000px; 
}
于 2013-06-18T16:03:33.330 回答