Question

我是完全网页设计的新手，我正在使用github来托管我的这个小项目，它不是最好的。

这就是我遇到的问题。我的导航栏不起作用，我不知道为什么。当我删除index.css并将navbar.css保留在。

时，我发现它有效

这是我的index.css。

html {
  width: 100%;
  height: 100%;
  background: url("/images/background.jpg") center center no-repeat;
}
.responsive-container {
  width: 100%;
  border: 1px solid black;
}
.img-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  font-family: Helvetica, Arial, sans-serif;
  color: #e6e6e6 !important;
}

这是我的navbar.css

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

最后这是我的index.html

<head>
  <link rel="shortcut icon" href="/favicon.ico">
  <title>&lrm;</title>
  <link rel="stylesheet" type="text/css" href="/stylesheets/index.css">
  <link rel="stylesheet" type="text/css" href="/stylesheets/navbar.css">
</head>
<body>
  <ul class="text">
    <li><a class="active" href="/pwgen">Password Generator</a>
    </li>
    <li><a href="http://thejaffaking.imgur.com">Imgur</a>
    </li>
  </ul>
  <div class="responsive-container">
    <div class="container"></div>
    <div class="img-container">
      <a href="https://www.overbuff.com/players/pc/TheKingJaffa-2542">
        <img src="/images/logo.png" alt="logo" />
      </a>
    </div>
  </div>
</body>

我要求的是为什么它不能正常工作的一点帮助。我猜它是我的index.css中的东西，但我不确定它是什么。

对不起，如果这是相当明显的，我不是在考虑事情

Answer 1

您的img-container设计为覆盖内容。使用z-index修复导航。

在CSS中更改此内容：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

到此：

ul {
position: relative;
z-index:1; 
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

导航栏不起作用

1 个答案: