我不熟悉完整的Web设计,我正在使用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中,但是我不确定它是什么。

抱歉,这很明显,我没有考虑

最佳答案

您的img容器的样式设置为叠加内容。使用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;
}

关于html - 导航栏不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41535693/

10-12 12:48
查看更多