Question

我创建了一个网站，并且最近尝试完全改变它并且我已经完成但是我的导航栏似乎被打破了，因为我得到了错误的颜色并且条形不是水平的。这是html代码：

<body>
<div class="content">
        <h1 class="text-center">
    <header>
        <a href="index.html">
        <img src="img/channelart.jpg" alt="Nor1Gamez"></a>
        <div class="nav">
            <ul> 
            <li><a href="index.html"> Home |</a></li> 
                  <li><a href="about/index.html"> About Me |</a></li>
                      <li><a href="razer.html"> Razer |</a></li>
            <li><a href="http://www.youtube.com/Nor1Gamez"> YouTube |</a></li>                  
                  <li><a href="https://twitter.com/Nor1Gamez"> Twitter |</a></li>
            <li><a href="https://www.patreon.com/Nor1Gamez"> Patreon </a></li>
        </ul> 
        </div>
    </header>
    <div class="clear"></div>

然后这是CSS代码：

nav ul{
list-style-type: none;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
}
nav ul li {
display: inline;;
font-size: 2em;
float: left;
}

nav ul li a{
display:block;
color:#00FF00;
text-decoration:underline;
padding: 6px;
float: left;
}

nav ul li a:hover{
text-decoration: none;
color:#ffc0f8;
}

此处还有一张网站图片：
http://i.stack.imgur.com/HMH6u.png

谢谢！

Answer 1

您错过了CSS的类标识符中的句点。

示例：

nav ul li a:hover{
   text-decoration: none;
   color:#ffc0f8;
}

应该是：

.nav ul li a:hover{
   text-decoration: none;
   color:#ffc0f8;
}

更新：

您的CSS中的另一个错误似乎可以解决原始问题，因为您已将其评论出来，因此您错过了一个结束括号：

应该是：

  aside {
        width: 32%;
        height: 650px;
        display: block;
        border-width: 1px;
        border-color: #ffffff;
  }

通过使用适当的缩进编写更清晰的代码，将来可以更轻松地避免/捕获这些类型的错误。我建议您检查代码是否存在其他错误并进行验证。

请注意，这是添加中提出的其他建议（例如删除或关闭h1标记）

Answer 2

<h1 class="text-center">未关闭

<h1 class="text-center"></h1>

CSS导航栏不是水平的，颜色错误

2 个答案: