动态添加文本时按钮移动，如何修复？

Question

我正在创建一个应用程序，其中我使用包含字母的按钮填充屏幕，当单击按钮时，该字符将出现在另一个按钮上。当最初创建按钮时，它们在页面上正确定位，但只要我通过jQuery向按钮添加一个字母，单击的按钮就会移动，接收该字母的按钮也会移动。

我想知道如何解决这个问题。我已经尝试添加CSS以及更改我的HTML布局，但似乎没有任何效果。

以下是页面使用的HTML代码：

<div id="center">
  <h1>Word Game</h1>
  <img src ="" id ="answerImage" alt = "overwatch"/>
  <h2>Inputs</h2>
  <div id="inputs"></div>

  <h2>Scrambled Word</h2>
  <div id="wordScambled"></div>
</div>

以下是用字母填充按钮的代码：

newWord += '<button class= "character" id =' + count + ' value = ' + count + ' style="width: 45px; height:45px;margin-left: 10px; border: 2px solid #238d9c; border-radius: 5px;background-color: #b4eaea;">' + alphebet[Math.floor(Math.random() * alphebet.length)] + '</button>';

然后，这用于将按钮设置为HTML：

$("#wordScambled").html($("#wordScambled").html() + newWord);

这是css：

#center{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  text-align: center;
}
#wordScambled{
   vertical-align:top;
}
#center img{
  width: 400px;
  height: 300px;
}

Answer 1

我认为这是因为您要为每个新单词添加样式。尝试将其分开。需要更多图像或包含css和点击部分。

Answer 2

我会在div＃wordScambled中添加一个嵌套的span，带有一个display：block，它有一个固定的宽度，可以在添加新字母时显示字母而不会移动。

    <style>
#center{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  text-align: center;
}
#wordScambled{
   vertical-align:top;
}

#wordScambled > span{
   display: block;
width: 30px;
}
#center img{
  width: 400px;
  height: 300px;
}
</style>
<div id="center">
  <h1>Word Game</h1>
  <img src ="" id ="answerImage" alt = "overwatch"/>
  <h2>Inputs</h2>
  <div id="inputs"></div>

  <h2>Scrambled Word</h2>
  <div id="wordScambled"><span></span</div>
</div>

<script>
$("#wordScambled span").html($("#wordScambled").html() + newWord);
</script>