如何在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;
}