0

我正在尝试在 G-mail 和其他一些 Google 服务上重新创建 Google 风格的工具栏。

在此处输入图像描述

我曾尝试将其作为格式化列表和嵌套在一个容器中的 div 元素,但我每次都遇到同样的问题。

当您将鼠标悬停时,新的 1px 边框会移动所有其他元素,我必须应用以下内容:

left: -1px;
bottom: 1px;

这对于当前的元素来说都很好:hover'd,所有其余的都在移动,它看起来很丑。

所以我想我的问题是: 有没有什么方法可以显示:悬停上的新 1px 不会改变定位,同时仍然显示这些元素而没有绝对定位。

显然,如果唯一的途径是绝对定位,我必须在其中放置像素坐标,那么当然可以,但必须有一种更优雅的方式。

4

1 回答 1

1

你可以做几件事来避免 1px 边框在悬停时移动东西。

http://jsfiddle.net/ZeikJT/tBmm2/

一种解决方案是添加透明边框 ( border:1px solid transparent),以便始终存在间隙。这几乎适用于所有情况。它还允许您简单地更改border-color悬停时而不重新指定边框宽度,因此如果您决定更改宽度,则无需在两个位置进行更改。

http://jsfiddle.net/ZeikJT/NkBwp/

另一种解决方案是添加边距或填充,然后在悬停时取出。要正常工作有点棘手,但也可以正常工作。

于 2012-12-04T17:33:42.493 回答