计算器按键点击效果异常：点击单键时同列按键联动移动求助

我给计算器按键添加了点击效果，但点击其中一个按键时，同一列的其他按键也会随之移动。希望解决这个问题，要求点击单个按键时其他按键保持原位，同时保留「按键按下效果」且不破坏布局间距，问题出在键盘区域！

编辑说明：我刚在代码中加入了找到的解决方案！可查看编辑详情了解具体内容！

现有代码 #

JavaScript #

const keys = document.querySelectorAll('#keys-container div');
keys.forEach(key => key.addEventListener('mousedown', () => key.classList.add('press-div')
));
keys.forEach(key => key.addEventListener('mouseup', () => key.classList.remove('press-div')
));

CSS #

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body > div {
    border: 1px solid black;
}

#display-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 142px;
    width: 440px;
}
#display-border {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 410px;

}
#display {
    border: 1px solid black;
    height: 70px;
    width: 400px;
}

#keyboard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 420px;
    width: 440px;
}
#keys-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    gap: 12px;
    height: 377px;
    width: 410px;
}
#keys-container div {
    display: flex;
    justify-content: center;
    align-items: center;
    /*box-sizing: border-box;*/
    border: 1px solid black;
    border-bottom: 3px solid black;
    height: 60px;
    width: 80px;
    transition: 0.01s;
}
#keys-container .press-div {
    border-bottom: 1px solid black;
    margin-top: 2px;
}

HTML #

<body>
    <div id="display-container">
        <div id="display-border">
            <div id="display"></div>
        </div>
    </div>

    <div id="keyboard">
        <div id="keys-container">
            <div>ON/C</div>
            <div>7</div>
            <div>4</div>
            <div>1</div>
            <div>0</div>
            <div>CE</div>
            <div>8</div>
            <div>5</div>
            <div>2</div>
            <div>&#8901;</div>
            <div>&#177;</div>
            <div>9</div>
            <div>6</div>
            <div>3</div>
            <div>&#61;</div>
            <div>&#247;</div>
            <div>&#215;</div>
            <div>&#8722;</div>
            <div style="height: 136px">&#43;</div>
        </div>
    </div>
</body>

问题原因 #

当前实现中，.press-div类通过margin-top: 2px调整按键位置，同时将底部边框从3px改为1px，这直接改变了按键的实际盒模型尺寸和占位。由于keys-container采用flex纵向换行布局，单个元素的占位变化会触发同列其他元素的重排，导致整列按键移位。

解决方案 #

要避免布局移位，需保证按键按下时不改变元素的实际占位，仅通过视觉变换实现按下效果，推荐两种方法：

方法1：使用transform实现位移 #

修改.press-div的CSS样式，用transform: translateY()替代margin调整位置：

#keys-container .press-div {
    border-bottom: 1px solid black;
    /* 移除margin-top，改用transform实现视觉下移 */
    transform: translateY(2px);
}

transform仅改变元素的视觉位置，不会影响其盒模型占位，因此周围元素不会移位。

方法2：使用padding补偿边框变化 #

开启box-sizing: border-box，通过调整内边距平衡边框减少的尺寸：

#keys-container div {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* 确保padding包含在元素尺寸内 */
    border: 1px solid black;
    border-bottom: 3px solid black;
    padding-top: 2px; /* 初始顶部留2px内边距，补偿底部边框高度 */
    height: 60px;
    width: 80px;
    transition: 0.01s;
}
#keys-container .press-div {
    border-bottom: 1px solid black;
    padding-top: 0; /* 移除顶部内边距，实现按下效果 */
}

这种方式下元素的整体尺寸（height/width）不变，仅内部内容位置调整，不会影响布局。

内容的提问来源于stack exchange，提问作者91Flavio91