Question

我刚刚开始学习代码，我已经设法自己解决了大多数问题。然而，这个让我变得更好。

我试图让导航栏位于页面顶部，文本位于其下方，但元素只位于导航栏下方，并阻止导航栏点击页面顶部。

我将不胜感激任何建议。

非常感谢，拉斯

＆＃13;

html {
  height: 100%;
}

body {
  margin: 0;
  box-sizing: border-box;
  min-width: 200px;
  height: 100%;
}

.nav {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-family: arial, sans-serif;
  background-color: #404040;
  position: fixed;
  width: 100%;
}

.nav>li {
  display: inline-block;
  padding: 10px 50px;
}

a {
  text-decoration: none;
  color: #FFF;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Portfolio</title>
  <link type="text/css" href="portfolio.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <ul class="nav">
    <li><a href="../Home/Index.html">Home</a></li>
    <li><a href="../About/about.html">About me</a></li>
    <li><a href="../Contact/contact.html">Contact</a></li>
  </ul>

  <h1> hello world</h1>
</body>

</html>

＆＃13;

Answer 1

您错过了top:0元素上的fixed。

html {
  height: 100%;
}

body {
  margin: 0;
  box-sizing: border-box;
  min-width: 200px;
  height: 100%;
}

.nav {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-family: arial, sans-serif;
  background-color: #404040;
  position: fixed;
  top: 0;
  width: 100%;
}

.nav>li {
  display: inline-block;
  padding: 10px 50px;
}

a {
  text-decoration: none;
  color: #FFF;
}

<!DOCTYPE html>
<html>

<head>
  <title>Portfolio</title>
  <link type="text/css" href="portfolio.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <ul class="nav">
    <li><a href="../Home/Index.html">Home</a></li>
    <li><a href="../About/about.html">About me</a></li>
    <li><a href="../Contact/contact.html">Contact</a></li>
  </ul>

  <h1> hello world</h1>
</body>

</html>

导航栏未定位在页面顶部

1 个答案: