Google Style Toolbar CSS/HTML

Question

我正在嘗試在G-mail和其他一些Google服務上重新創建Google風格的工具欄。

我試圖這樣做既是一個格式化列表，並在一個容器中嵌套的div元素，但我每次都相同的問題。

當你的鼠標後，新1px的邊框移動所有其他元素，我要申請這樣的東西：

left: -1px; 
bottom: 1px; 

這是一切都很好了目前的元素：hover'd，所有其餘的移動，它看起來很醜。

所以我想我的問題是： 有什麼辦法才能顯示的內容，使得在一個新的1px的：懸停，不會改變定位，同時還顯示這些元素，而絕對定位。

顯然，如果唯一的途徑是絕對定位，我必須在像素座標中進行確定，但必須有一個更優雅的方法。

Answer 1

你可以做幾件事來避免1px邊框在懸停時移動東西。

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

的一個解決方案是增加一個透明邊框（border:1px solid transparent），使得總有一個間隙。這幾乎適用於所有情況。它還允許您只需更改懸停時的border-color，而不是重新指定邊框寬度，因此如果您決定更改寬度，則無需在兩處進行更改。

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

另一種解決方案是添加然後被取出上懸停的餘量或填充。這樣做有點棘手，但能夠正常工作。