如何将导航栏列表与正文列表分开？

Question

我目前正在使用Django 1.9构建一个网站，我正在编写所有HTML代码。但是，我在挣扎。

我使用以下HTML代码创建了导航栏：

以及以下CSS代码：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0,0,0,0.3);
float; right;
padding-right: 25px;
}


li {
float: right;
display: inline;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #000000;
color: white;
}

nav{
width: 960px;
margin: 0 auto;
}

然而，当我在部分部分编码列表时，它就像导航列表的出现一样。例如：

出现如下：

它们链接到同一个css，但我尝试链接到两个单独的css文件，因为它们在同一个HTML文件中，计算机出现错误。请有人帮助我。

Answer 1

您正在将li个样式应用于每个li，这就是您遇到问题的原因。为了将样式应用于特定项目，您可以使用类或ID，如下所示：

li {
  float: right;
  display: inline;
}

变为

li.nav_item {
  float: right;
  display: inline;
}

并且

<nav><ul><li>...变为<nav><ul><li class='nav_item'>...

还有许多其他方法可以将您的样式应用于特定元素，但这应该可以帮助您入门。在此处阅读更多内容：https://css-tricks.com/how-css-selectors-work/