如何防止输入数据后调整行大小

Question

我正在创建一个井字游戏。在初始状态下，我在任何按钮中都没有数据。但无论何时输入任何数据。板行调整大小，如果我单击所有按钮，它们会处于正常位置。

这里我没有提供所有代码。只提供主要问题部分。我怎样才能解决它们将始终保持相同位置的问题，尽管它们有任何价值或有任何价值。

.board {
    
}
.board button{
    width: 20px;
    height: 20px;
    padding: 20px;
    border: 1px solid #2d3e50;
    background-color: #34495e;
}

<div>
    <div class='board'>
      <button>X</button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
</div>

Answer 1

您可以尝试在容器中使用 display: flex，以便始终保持按钮居中并在一起。 Flex 总是有用的

.board {
    display:flex;
    justify-content:center;
    align-items:center;
}
.board button{
    width: 20px;
    height: 20px;
    padding: 20px;
    border: 1px solid #2d3e50;
    background-color: #34495e;
}

<div>
    <div class='board'>
      <button>X</button>
      <button>s</button>
      <button></button>
    </div>
    <div class='board'>
      <button>s</button>
      <button></button>
      <button></button>
    </div>
    <div class='board'>
      <button></button>
      <button></button>
      <button></button>
    </div>
</div>