上跨度正在移动较低的跨度...为什么这样

Question

我正在研究这个page，你可以看到有四个图像...如果你看左下方的booda ......它有两个链接视图Booda狗和视图Booda猫。如果你点击顶部的一个，底部链接向左移动...我生命中的我无法弄清楚如何解决这个问题。我正在使用位置依赖。这是我的一些CSS

.booda a.button_below {
        left: 107px;
    position: relative;
    top: 64px;
}

.entry .booda a.button {
 position: relative;
    right: 13px;
    top: 31px;
}

如果你在firebug中查看它还有其他的CSS

任何帮助将不胜感激...提前感谢

Answer 1

在我看来，当链接突出显示时，它与文本大小的变化有关。

选择上跨距时，跨度会扩大，底跨会移动以正确对齐。

尝试对齐右侧而不是左侧的跨度。

编辑：要将跨距对齐，您可以将其添加到当前的跨度标记中。

position: absolute; right: 0;

但你必须切换到绝对位置。要继续使用相对定位，您可以将跨度包装在具有position: relative

的单个容器中

Answer 2

请勿将position: relative与top和right一起使用。在他们的容器上使用position: relative，然后在position: absolute上使用span。

Answer 3

我不确定到底发生了什么，但是将底部按钮类从button_below更改为button并让clear:right为我修复它。

希望这能让你更接近解决方案！