Question

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

enter image description here

我尝试将其作为一个容器中的格式化列表和嵌套div元素，但每次都有相同的问题。

当你将鼠标移开时，新的1px边框将移动所有其他元素，我必须应用以下内容：

left: -1px;
bottom: 1px;

对于目前的元素来说，这一切都很好并且很好：hover'd，所有其余的移动并且它看起来很难看。

所以我想我的问题是： 有没有办法显示新的1px on：hover，不会改变定位，同时仍然显示这些元素没有绝对定位。

显然，如果唯一的途径是绝对定位，我必须放入像素协调，那么肯定，但必须有更优雅的方式。

Answer 1

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

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

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