如何防止单击时按钮移动？

Question

我在div中有几个按钮，一旦单击它们将显示一个值。 我遇到的问题是：单击一个按钮并显示一个值后，它也会向下移动。 我不确定如何防止这种情况的发生。 有人可以帮忙吗？ 这是我创建的示例的链接： http : //codepen.io/anon/pen/eJzROE

<div id="gamebox">
<input type="button" id="one" onclick="clickBtn('one')"/>
<input type="button" id="two" onclick="clickBtn('two')"/>
<input type="button" id="three" onclick="clickBtn('three')"/>
<input type="button" id="four" onclick="clickBtn('four')"/>
<input type="button" id="five" onclick="clickBtn('five')"/>
<input type="button" id="six" onclick="clickBtn('six')"/>
<input type="button" id="seven" onclick="clickBtn('seven')"/>
<input type="button" id="eight" onclick="clickBtn('eight')"/>
<input type="button" id="nine" onclick="clickBtn('nine')"/>
</div>
#gamebox
{
height:460px;
width:460px;
border:2px solid red;
}
input
{
width:150px;
height:150px;
font-size:60px;
}
var player= 1;
function clickBtn(btn){
if(player == 1){
document.getElementById(btn).value = "X";
document.getElementById(btn).disabled = "disabled";
player -=1;
}
else {
document.getElementById(btn).value = "O";
document.getElementById(btn).disabled = "disabled";
player +=1;
}
}

Answer 1

对CSS输入定义进行一些细微调整将有助于将尺寸强制为特定高度。

input
{
  background: white;
  border: 1px solid #DDD;
  height: 50px;
  float: left;
  display: block;
  font-size: 14px;
  width: 150px;
}

更新的示例： http : //codepen.io/anon/pen/qbNjXg

Answer 2

我看到了您的问题，但在不同的浏览器中，它的行为似乎有所不同。

为您提供的CodePen链接： http ://codepen.io/FredM7/pen/adZEor

通过使用“ divs”，我们可以让自己更轻松地对元素进行样式设置，从而创建外观更好的游戏。

HTML：

<div id="gamebox">
  <div id="one"  class="input enabled" onclick="InputClick('one');"><span></span></div>
  <div id="two"  class="input enabled" onclick="InputClick('two');"><span></span></div>
  <div id="three" class="input enabled" onclick="InputClick('three');"><span></span></div>
  <div id="four" class="input enabled" onclick="InputClick('four');"><span></span></div>
  <div id="five" class="input enabled" onclick="InputClick('five');"><span></span></div>
  <div id="six"  class="input enabled" onclick="InputClick('six');"><span></span></div>
  <div id="seven" class="input enabled" onclick="InputClick('seven');"><span></span></div>
  <div id="eight" class="input enabled" onclick="InputClick('eight');"><span></span></div>
  <div id="nine" class="input enabled" onclick="InputClick('nine');"><span></span></div>
</div>

您会注意到我那里也有一个span元素。 这个是来做什么的？？

跨度允许我们将元素居中（在本例中为跨度），而不必知道其高度或宽度如何-本质上是将未知高度和宽度的元素居中。 此范围将包含我们的X或O。

CSS：

#gamebox
{
  position: relative;
  height: 400px;
  width: 400px;
}

.input
{
  font-size: 40px;
  float: left;
  width: calc(33.33333333333333% - 2px);
  height: calc(33.33333333333333% - 2px);
  background: #505050;
  border: 1px solid black;
  cursor: pointer;
  display: table;
}

.input:hover
{
  background: #909090;
}

.input span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 40px;
}

100/3 = 33.33333333333333

因为我们在垂直方向上有3个元素，在水平方向上有3个元素，所以我们可能希望使它动态化。 动态是指更改游戏箱的大小，我们要做的就是更改“游戏箱”的大小，其他所有内容都将重新调整大小并放入其中。

JS：

var player = true;

function InputClick(id){
  var element = document.getElementById(id);
  if(HasClass(element, "enabled")) { //Disable
    element.className = "input disabled";
    if (player) {
      element.firstChild.innerHTML = "X";
    } else {
      element.firstChild.innerHTML = "O"; 
    }
    player = !player;

    //
    //Perform other game logic here, like checking win/lose.
    //
  }
}

function HasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

JS处理玩家的转弯，并且还更改元素的类，因此在找不到“已启用”类时不会执行更改，因此其行为类似于“已禁用按钮”。

同样，我没有尝试使用按钮，但就我个人而言，从长远来看，使用div是如此简单。

我希望这有帮助 ：）。