当我按下按钮时，我的按钮往下掉

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”类中，您应该没问题。