我的水平菜单有这样的样式
<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 代码的新手所以有什么帮助吗?
最佳答案
在您的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>
关于html - 如何在 css 中为菜单制作 ul 和 li 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41668217/