Question

所以，设法按照我喜欢的方式对我的导航栏进行排序......但是现在我已经移动到了我想要的东西下面。除非我无法获得控制权。超过＆＃39;列表＆＃39;元素......我做错了什么？

<!DOCTYPE html>

<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
    <Div class="container">
    <ul>
    <div class="nav">
        <li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>

    <div class="navbar">
        <li class="contact"><a href="contact.html">CONTACT</a></li>
        <li class="about"><a href="about.html">ABOUT</a>
        <strong><li class="leagues"><a href="leagues.html">LEAGUES</a></li></strong>
        <li class="home"><a href="index.html">HOME</a></li>     
    </div><!--Navbar End-->
    </div><!--Nav End-->
    </div><!--Container End-->
    </div class="list"><strong>
        <li><a href="essex.html">Essex</a></li>
        <li><a href="london.html">London</a></li>
    </strong></div><!--Leagues End-->
</body>
</html>

.container {
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  font-family: arial;
  z-index: 2;
}
.navbar a {
  float: right;
  text-decoration: none;
  padding-left: 10px;
  color: #003399;
}
.nav li {
  display: inline;
}
.navbar {
  float: right;
  padding-top: 67px;
  padding-bottom: 45px;
  padding-right: 0px;
  z-index: 2;
}
#intro img {
  position: absolute;
  left:0px;
  display: block;
  margin: 0;
  max-width: 100%;
  height: auto;
  z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}

Answer 1

li a{
  color: #000000;
}

这就是你需要在css中获得对这些内容的控制。请参阅此处的jsfiddle示例

http://jsfiddle.net/fwvc6zsc/

如果你想更确定你正在使用正确的那个，你也可以改变它：

strong li a{
  color: #000000;
  text-decoration: none;
}

Answer 2

因为你使用了不同的类

使用此：

.navbar li {
     css code 
}

为什么我无法控制＆＃39; list＆＃39;

2 个答案: