1

在此处输入图像描述我正在创建一个应用程序，我在屏幕上填充带有字母的按钮，当单击一个按钮时，该字符将出现在另一个按钮上。最初创建按钮时，它们在页面上的位置正确，但是一旦我通过 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;
}
4

3 回答 3

0

我认为这是因为您正在为每个新单词添加样式。试着把它分开。需要更多图片或包含 css 和点击部分。

于 2018-05-23T15:19:58.343 回答
0

我会在 div#wordScambled 内添加一个嵌套跨度，并带有一个 display: 块，以在将新字母添加到其中时显示该字母而不会移动。

    <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>
于 2018-05-23T15:21:16.847 回答
0

我知道这对聚会来说已经很晚了，但我也遇到了这个问题。没有位置或显示属性的组合解决了这个问题。对我来说，解决方法是简单地在按钮中始终保留一个字符。由于 javascript 会去除空格字符，因此您不能简单地这样做：

btn.innerHTML = " ";

但是使用不可见的字符是有效的，例如：

btn.innerHTML = '\u2060';
于 2022-01-22T12:56:33.227 回答