html - div 中的元素在 JS 事件后移动

Question

我遇到了一些 CSS 样式问题。

首先，请原谅糟糕的样式 - 我刚刚整理了游戏的逻辑，现在正在处理样式

该游戏是一款简单的剪刀石头布游戏。每次我点击一个正方形(代表剪刀石头布)，游戏逻辑就会运行，你或电脑玩家都会得到一分。一旦两个玩家的分数都更新了，带有 div stripe 的元素就会在 div 中被推上去。

我不确定这是 html/css 问题还是 JS 问题 - 但我希望带有 stripe div 的元素始终保持居中。

我附上了图片来向您展示我的意思 - 因为我确定我所说的话让你们所有人感到困惑。

干杯

代码:

body {
  margin: 0;
  font-family: "Montserrat", "Avenir";
}

#header {
  line-height: 1.1;
  text-align: center;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
}

#stripe {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  height: 50px;
}

#reset {
  width: 5%;
}

#message {
  display: inline-block;
  width: 10%;
}

#yourScore {
  display: inline-block;
  width: 2%;
}

#compScore {
  display: inline-block;
  width: 2%;
}

.option {
  width: 30%;
  background: steelblue;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
  border-radius: 25px;
  transition: background .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
}

#buttons {
  margin: 20px auto;
  max-width: 600px;
}

<div id="header">
  <h1>Rock Paper Scissors</h1>
</div>

<div id="stripe">
  <button id="reset">Reset</button>
  <span id="message"><p></p></span>
  <span id="yourScore" data-value="0"><p>0</p></span>
  <span id="compScore" data-value="0"><p>0</p></span>
</div>

<div id="buttons">
  <div id="rock" class="option">rock</div>
  <div id="paper" class="option">paper</div>
  <div id="scissors" class="option">scissors</div>
</div>

Answer 1

如评论中所述，您可能丢失了 p s 在更新 #message 的内部 html 时#yourScore和 #compScore .

我建议您删除所有 p s 从条纹内并更改样式以添加一些顶部/底部填充:

#stripe {
  text-align: center;
  width: 100%;
  padding: 15px 0;
}