个人中心
gpt4 book ai didi

html - 导航栏不起作用

转载 作者：行者123 更新时间：2023-11-28 04:34:58 24 4
gpt4 key购买 nike

我是完整网页设计的新手，我正在使用 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-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;
}

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

24 4 0
文章推荐： html - CSS-在标题中以响应方式将 Logo 居中，名称在其两侧
文章推荐： html - 如何将链接直接放在表单域下方？
文章推荐： javascript - HTML 5 背景视频代码似乎不起作用
文章推荐： javascript - 忽略使用 css 方法的 Jquery 链接