我怎样才能改变 div 所以当我按下它时，文本会改变但它的大小不会？

Question

我已经在互联网上搜索了几个小时如何单击 div 标签并更改其文本而不更改其大小，每次当我单击 div 标签时，文本都会更改，但它的大小和正方形会变大（如果我更改文本大小，因为小于正方形的大小会变大，但小于大的文本大小）

这是 HTML 代码：

<div class="Table">
  <h1>Tic-Tac-Toe Game</h1>
  <div id="message">messages will go here</div>
<div class="Row">
  <div id="s1" class="button" onclick="nextMove(this)">
  </div>
  <div id="s2" class="button" onclick="nextMove(this)">
  </div>
  <div id="s3" class="button" onclick="nextMove(this)">
  </div>
</div>
<div class="Row">
  <div id="s4" class="button" onclick="nextMove(this)">
  </div>
  <div id="s5" class="button" onclick="nextMove(this)">
  </div>
  <div id="s6" class="button" onclick="nextMove(this)">
  </div>
</div>
<div class="Row">
  <div id="s7" class="button" onclick="nextMove(this)">
  </div>
  <div id="s8" class="button" onclick="nextMove(this)">
  </div>
  <div id="s9" class="button" onclick="nextMove(this)">
  </div>
</div>
</div>

<a href="javascript:startGame();">Start Over</a>

这是js代码：

var winner;
var turn;

function startGame() {
  for (var i = 1; i <= 9; i = i + 1) {
    clearBox(i);
  }


  turn = "X";
  if (Math.random() < 0.5) {
    turn = "O";
  }
  winner = null;
  setMessage(turn + " gets to start.");

}

function setMessage(msg) {
  document.getElementById("message").innerText = msg;
}

function nextMove(square) {
  if (winner != null) {
    setMessage(winner + " already won the game.");
  } else if (square.innerText == "") {
    document.getElementById("square.id").innerText = turn;
    switchTurn();
  } else {
    setMessage("That square is already used, " + turn + "'s turn again.");
  }
}

function switchTurn() {
  if (checkForWinner(turn)) {
    alert("Congratulations " + turn + "! you win!");
    setMessage("");
    winner = turn;
  } else if (turn == "X") {
    turn = "O";
    setMessage("It's " + turn + "'s turn");
  } else {
    turn = "X";
    setMessage("It's " + turn + "'s turn");
  }

}

function checkForWinner(move) {
  var result = false;
  if (checkRow(1, 2, 3, move) || checkRow(4, 5, 6, move) || checkRow(7, 8, 9, move) ||
    checkRow(1, 4, 7, move) || checkRow(2, 5, 8, move) || checkRow(3, 6, 9, move) ||
    checkRow(1, 5, 9, move) || checkRow(3, 5, 7, move)) {
    result = true;
  }
  return result;
}

function checkRow(a, b, c, move) {
  var result = false;
  if (getBox(a) == move && getBox(b) == move && getBox(c) == move) {
    result = true;
  }
  return result;
}

function getBox(number) {
  return document.getElementById("s" + number).innerText;
}

function clearBox(number) {
  document.getElementById("s" + number).innerText = "";
}

这是css代码：

.Table {
  display: table;
}

.Row {
  width: 100%;
  height: 30px;
}

.button {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 30px 30px;
  text-align: center;
  display: inline-block;
  font-size: 10px;
  margin: 4px 2px;
  cursor: pointer;
}

Answer 1

.row {
  display: flex;
}

.col {
  flex: 1; 

  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Hello</div>
  <div class="col">WelCome</div>
</div>