点击按钮位置波动

本文介绍了点击按钮位置波动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用HTML，CSS和Javascript创建一个计算器。我试图给它一个时尚的外观。但问题出现在我面前。我的问题是，当我点击任何按钮然后完成按钮组从它的位置稍微移动。这个事情发生在为按钮提供值后。当我没有提供任何值时，它运行没有任何问题。 我正在为您提供一个链接：点击此处查看jsfiddle链接 [ ] 第一个例子是我所说的问题。后来一个没有价值观。（但正确地工作） 提前谢谢

I am creating a Calculator using HTML,CSS and Javascript. I am trying to give it a stylish look. but a problem come in front of me.My Problem is when I click on any button then then complete set of button moves slightly from its position.This thing is happening after providing values to the buttons.When I have not provided any value then it runs without any problem. I am providing you a link:click here to view jsfiddle link[] The first one example is having with problem which i am saying about.and the later one is without values.(But working Correctly) Thanks in advance

推荐答案

问题是按钮的边框顶部。我刚刚添加了 border-top：solid 2px transparent; to .button 另外，对于它的价值，你可以简化那个css。你有很多属性可以重复多种风格。你应该将它们放入一个它们都继承的样式中，就像你在（例如）按钮上的边框半径一样。 另一个观察 - 你真的不应该使用按钮之间的这5个空格来定位它们。还有更多可以改进的地方，但我会把它作为读者的练习。 这是一个稍微简洁的版本： jsfiddle/hnLEG/1/ [ ^ ] The problem is the border-top of the buttons. I just added border-top: solid 2px transparent; to .button Also, for what it's worth, you can simplify that css quite a bit. You've got quite a few attributes that get repeated for many styles. You should put them into a style that they all inherit from, much like you have with (for example) the border-radius on the buttons. Another observation - you really shouldn't be using those 5 spaces between buttons to position them. There's lots more that could be improved here, but I'll leave that as an exercise for the reader. Here's a slightly more concise version: jsfiddle/hnLEG/1/[^]