当我按下按钮时,我的按钮会下降

Question

我在一个电路板上有9个按钮,每当我按下它时我想要显示'X'或'O'.然而,当我按下按钮时它会下降.

$(document).ready(function(){

  var against = 'human';
  var board = ['-','-','-',
               '-','-','-',
               '-','-','-'];
  var turn = 'X';
  
  $('.xo-btns').click(function(){
    $(this).text(turn);
  });
  
});

body{
  padding: 0px;
  margin: 0px;
  width: auto;
  height: auto;
  background: black;
  font-family: 'Raleway', sans-serif;
}

.container{
  text-align: center;
}

.board{
  display: inline-block;
  text-align: center;
  background: red;
  padding-top: 15px;
  padding-left: 10px;
  height: 250px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.xo-btns{
  width: 70px;
  height: 70px;
  padding: 0px;
  border-radius: 4px;
  background: transparent;
  outline: none;
  color: white;
/*   display: inline-block; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="board">
    <button class="xo-btns" id="one" value="1"></button>
    <button class="xo-btns" id="two" value="2"></button>
    <button class="xo-btns" id="three" value="3"></button> 
    <br> 
    <button class="xo-btns" id="four" value="4"></button>
    <button class="xo-btns" id="five" value="5"></button>
    <button class="xo-btns" id="six" value="6"></button> 
    <br>  
    <button class="xo-btns" id="seven" value="7"></button>
    <button class="xo-btns" id="eight" value="8"></button>
    <button class="xo-btns" id="nine" value="9"></button>  
    <br>
  </div>
  
</div>

我怎样才能解决它,所以每当我按下其中一个时,它们就会停留在它们开始的地方.

谢谢!

Answer 1

这是因为vertical-align属性,在我看来有时会出现错误行为.

添加 vertical-align: middle;到您的"xo-btns"课程,你应该没事.