Question

我使用jquery工具可滚动插件和Navigator插件导航按钮。

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

现在我必须对导航按钮进行绝对定位：

.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

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

我认为这个图像'navigator.png'是20x20px，所以你必须在.navi上使用块元素才能设置大小。在这种情况下，你将不得不使用float：left on .navi a，然后将.navi width：auto更改为指定大小（3 a tags = 3 x（8 + 6）= 42 - 这是宽度+边距）。然后，您可以在标签中输入一些文本，您可以使用.navi文本缩进隐藏：-9999px。

另一种方法是使用一些填充来破解它。就个人而言，我会使用第一个解决方案。如果您需要澄清CSS代码，请告诉我。

Answer 2

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

设置导航按钮

2 个答案: