导航按钮的设置

Question

我使用jquery工具的滚动插件和导航插件来实现导航按钮。

一切都很好，只是定位的问题。

现在我必须给我们导航按钮的绝对定位：

.navi {
    width: auto;
    height:13px;
    position: absolute;
    right: 35px;
    top: 10px;
}

.navi a {
    width:8px;
    height:8px;
    float:right;
    margin:3px;
    background: url(../img/navigator.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
    cursor: pointer;
}

我需要让锚点向右浮动，因为它们会动态增长，在设计中，锚点在右侧对齐，向左侧增长。

问题是，插件会让最右边的锚点成为第一个锚点。我需要左边的第一个锚是第一个锚，然后向右迭代。

当前的html如下所示

<div class="navi">
  <a></a>
  <a></a>
  <a class="active"></a>
</div>

让它们漂浮在右边。

我需要它们向右浮动，但像这样渲染：

<div class="navi">
  <a class="active"></a>
  <a></a>
  <a></a>
</div>

我正在使用这个插件Jquery Tools Navigator

Answer 1

float:right;的默认功能是显示最右边的第一个元素，随后的元素将从右到左排列。如果你想让它们从左到右显示，你必须使用float: left;。如果向左浮动对您不起作用，您将不得不重新排列图像的顺序。

Answer 2

这只是一个CSS问题--与jquery无关，当然也不是C# 'float‘标签！

我假设这个图像'navigator.png‘是20x20px的，所以你必须在.navi上使用一个块元素来设置大小。在这种情况下，您将不得不在.navi a上使用.navi : left，然后将标记宽度: auto更改为指定的大小(3 a标签=3 x (8+6) = 42 -这就是width+margin)。然后，您可以在标签中输入一些文本，您可以使用.navi a text-indent:-9999px隐藏这些文本。

另一种选择是使用一些填充对其进行一些修改。就我个人而言，我会使用第一种解决方案。让我知道，如果你需要澄清的CSS代码。