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处理玩家转弯，并且还改变了元素的类，因此当它找不到'enabled'类时不会执行更改，因此表现得像'禁用按钮'。

同样，我没有尝试使用按钮，但就我个人而言，从长远来看，使用div更容易。

我希望这会有所帮助:)。

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

2 个答案: