如何在css中制作ul和li样式只是为了菜单

Question

我有像这样的水平菜单的样式

<style>
 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:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>

在我的HTML中，我的水平菜单有这样的代码

<ul>
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

我的水平菜单正常工作，问题是当我在我的HTML代码的另一部分（不是水平菜单）中有另一个ul和li时，就像这样

<ul>
 <li >Parth 1</li>
 <li >part 2</li>
</ul>

他们的风格遵循我的水平菜单的风格，我是CSS代码的新手所以任何帮助？

Answer 1

首先，伟大的工作迈出一步，学习CSS！ 你会爱上它的。

你需要在这里学到的是添加一个类或id，以便在菜单中选择ul和li 。

也许你的代码看起来像这样。

<ul class="mainMenu">
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

在这种情况下，您提到的水平样式必须被称为......

ul.mainMenu (or just .mainMenu)  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.mainMenu li {
   float: left;
}

/* And so on... */
.mainMenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

在你进一步学习css之前，你应该花一些时间来学习类和ID以及如何使用它们作为你的选择器 - 这将有助于使CSS更有趣。 干杯!

Answer 2

将类分配给ul并将其用作CSS中的选择器：

<ul class="mymenu">
 <li ><a href="#home">Home</a></li>
 <li ><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

CSS：

ul.mymenu  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.mymenu li {
   float: left;
}

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

.mymenu li a:hover:not(.active) {
  background-color: #111;
}

.mymenu .active {
  background-color: #4CAF50;
}

Answer 3

在你的ul上放一个class ，让你的样式规则依赖于那个类而不是ul 。 不要使用内联样式。

 .menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } .menu li { float: left; } .menu li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .menu li a:hover:not(.active) { background-color: #111; } .menu li a.active { float: right; } .active { background-color: #4CAF50; } 

 <ul class="menu"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a class="active" href="#about">About</a></li> </ul> <ul> <li>Part 1</li> <li>part 2</li> </ul> 

Answer 4

你给菜单一个class class="myclass"或id id="myid" （推荐类），例如

<ul class="menu"> ，然后使用.menu {...}和.menu li {...}等来定位它。 这将使任何其他<ul> s保持不变。

注意，一个类可以与多个元素一起使用，但id必须是唯一的。

Answer 5

你可以使用class或id HTML的属性来做到这一点：

 <ul id= "itemList">
  <li class="item"><a href="#home">Home</a></li>
  <li class="item"><a href="#news">News</a></li>
  <li class="item"><a href="#contact">Contact</a></li>
  <li class="item" style="float:right"><a class="active" href="#about">About</a></li>
 </ul>

然后：

#itemList {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

#itemList .list {
   float: left;
}

#itemList .list a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}