点击按钮位置波动 [英] On clicking buttons position fluctuates

问题描述

我正在使用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个空格来定位它们。还有更多可以改进的地方，但我会把它作为读者的练习。



这是一个稍微简洁的版本：

http://jsfiddle.net/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:
http://jsfiddle.net/hnLEG/1/[^]

这篇关于点击按钮位置波动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！