Question

我开始学习如何在过去几周内编写代码，我一直在努力改进和扩展，并通过创建基于文本的Web浏览器游戏来实践我学到的一些东西。

我遇到的问题是当我创建一个RNG并尝试添加一个受限制的边框时，它会扩展以填充网页的水平部分。

我尝试过使用一些边框测量说明，但似乎没有任何影响。我已经尝试过搜索各种网页以获得解决方案，但没有。

我已发布到目前为止我写的内容：

<style>
 .bordered {
  width 50px;
  height 50px;
  padding 25px;
  border: 3px solid black;
 }
</style>

<section>
<div class="bordered">
<p id="one"; width 50px;></p>
<button onclick="random()">Random</button>
<script>
 function random(){
document.getElementById("one").innerHTML = Math.floor(Math.random() * 100);
}
</script>

有什么建议吗？

Answer 1

问题是您的HTML / CSS无效：

您的代码行<p id="one"; width 50px;></p>有一些错误;属性后面不应有分号，并且width需要等号。理想情况下它也会引用引号，如<p id="one" width="50px"></p>。另请注意，设置这样的内联规则通常被视为不良做法，并且它们具有第二高级别 specificity 。在大多数情况下应该使用CSS。
您的CSS规则需要使用冒号将属性与其值分开。例如，width 50px应为width: 50px。

两者内联样式和CSS样式均无效，随后尝试将width设置为50px即被应用。由于该元素是块级的，因此默认情况下会扩展为最大宽度。

修复上述两个问题会限制边框的宽度，但作为额外的挑剔，您应该避免使用内联事件处理程序 onclick 。相反，您应该使用JavaScript的 addEventListener() 方法将标记与逻辑分开。

以下都可以看到：

＆＃13;

document.getElementsByTagName('button')[0].addEventListener("click", function() {
  document.getElementById("one").innerHTML = Math.floor(Math.random() * 100);
});

＆＃13;

.bordered {
  width: 50px;
  height: 50px;
  padding: 25px;
  border: 3px solid black;
}

＆＃13;

<section>
  <div class="bordered">
    <p id="one"></p>
    <button>Random</button>
  </div>
</section>

＆＃13;

希望这有帮助！

Html5 RNG边框

1 个答案: