css - 如何制作按钮面板，当鼠标悬停时，一个按钮变大，但大小变化不影响面板上其他按钮的布局

Question

现在，当鼠标悬停在上面时，字体会变大，但会拉伸(stretch)外容器。

我不希望外容器伸出来。解决办法是什么？

Answer 1

您可以将边距向下调整的幅度与增加元素大小的幅度相同。

.button{
    width:20px;
    height:20px;
    margin:15px;
}
.button:hover{
    width:30px;
    height:30px;
    margin:10px;
}

参见 fiddle :http://jsfiddle.net/tm1uethc/2/