Question

我正在努力构建用户界面，我遇到了一个非常奇怪的问题。

列表永远不会变色，永远不会删除下划线。

/*############## Start Mine Style ##############*/

body{
  background-color: #fff;
}

.contaner{
  width: 1170px;
  margin: auto;
}

/*############## End Mine Style ##############*/

/*Start Header*/
.header{
  background-color: #666;
  height: 20px;
}
/*End Header*/

/*Start Navbar*/
.navbar{
  background-color: #252f31;
  padding: 0;
  color: #fff;
}
.navbar ul{
  list-style: none;
  overflow: hidden;
  padding: 0;
  display: inline-block;
  color: #fff;
  text-decoration: none; 
}
.navbar ul li{
  float: left;
  padding: 20px;
  color: #fff;
}
/*End navbar*/

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PsdToHtml-1!</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/normalize.css">
    </head>
    <body>
        <div class="header">
            <div class="slider">
                Slider
            </div>
        </div>
        <div class="navbar">	
            <ul>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
            </ul>
        </div>
    </body>
</html>

Answer 1

您正在为li元素设置样式，而不是a元素。

尝试添加此规则：

.navbar ul li a {
    color: inherit;
    text-decoration: none;
}

带有列表

1 个答案: