Question

我目前正在尝试学习将Javascript和CSS集成在一起的HTML5，以便在画布上制作基于Web的游戏，而我目前正在底部导航栏上工作，然后再对游戏本身进行任何操作所有可链接的对象，例如导航栏和标签。

任何人在尝试创建导航栏时，遇到一个问题，该问题导致导航栏和其下方的边框在两者之间留有空格，使它看起来很伪劣。我个人认为，我在下面提供了当前代码：

.container h1 {
  margin-top: 0;
  padding-top: 1em;
}

.topnav {
  background-color: black;
  overflow: none;
}

.topnav a {
  float: center;
  position: relative;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 20px solid transparent;
}

.topnav a:hover {
  border-bottom: 5px solid red;
}

.topnav a:active {
  border-bottom: 8px solid red;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text-html" charset="utf-8">
  <title>Power Trip - The game about producing power over time</title>
</head>

<!-- Main Game Canvas Codeblock -->

<body>
  <canvas width="1280" height="720" id="GameCanvas" style="">
                
            </canvas>
</body>

<!-- End of Main Game Canvas Codeblock -->
<!-- Bottom Nav Codeblock -->

<footer>
  <center>
    <div class="topnav">
      <div><a href="">Website</a> | <a href="">Facebook</a> | <a href="">Twitter</a> | <a href="">Contact Us</a></div>
    </div>
  </center>
</footer>

<!-- End of Bottom Nav Codeblock -->

</html>

还尝试增加底部导航栏的黑色空间，以使导航栏具有更大的表面积，但不确定如何操作：

我会选择这种导航栏，也可能会选择将完整的页脚并排分成4个部分（每个导航栏1个）。

感谢您提供的任何帮助。

Answer 1

问题并不是真正的问题：)规则按照指定的方式应用，在这种情况下，您向标签添加了太多填充。见下文我在哪里注释了您的规则

注意，我删除了一些内容，只是为了使其更具可读性

.container h1 {
  margin-top: 0;
  padding-top: 1em;
}

.topnav {
  background-color: black;
  overflow: none;
  text-align: center;
}

.topnav a {
  float: center;
  position: relative;
  color: #f2f2f2;
  text-align: center;
  /* padding: 14px 16px; */ 
  padding: 5px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 20px solid transparent;
}

.topnav a:hover {
  border-bottom: 5px solid red;
}

.topnav a:active {
  border-bottom: 8px solid red;
}

<body>
  <!-- End of Main Game Canvas Codeblock -->
  <!-- Bottom Nav Codeblock -->

  <footer>
      <div class="topnav">
        <div>
          <a href="">Website</a>
          <a href="">Facebook</a>
          <a href="">Twitter</a>
          <a href="">Contact Us</a>
        </div>
      </div>
  </footer>
</body>

底部导航栏空白

1 个答案: