文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在css中为菜单设置ul和li样式

问如何在css中为菜单设置ul和li样式
EN

Stack Overflow用户

提问于 2017-01-16 09:19:31

回答 5查看 7.3K关注 0票数 2

我对我的水平菜单有这样的风格

<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代码的新手，有什么帮助吗？

html

css

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-01-16 09:24:08

在您的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>

票数 3

Stack Overflow用户

发布于 2017-01-16 09:24:30

首先，迈出一步并学习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变得更有趣。干杯！

票数 6

Stack Overflow用户

发布于 2017-01-16 09:23:26

为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;
}

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41668217

复制

相似问题

问如何在css中为菜单设置ul和li样式
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中为菜单设置ul和li样式EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中为菜单设置ul和li样式
EN