我有一个我正在 build 的网站,我正在为它做一个菜单栏。
我的问题是,我在菜单之间创建了分隔符,我希望最后一个菜单选项没有分隔符。
CSS 代码:
div#menu ul {
top:5px;
position: relative;
list-style-type: none;
height: 80px;
width: 900px;
margin: auto;
}
div#menu li{
float:left;
}
div#menu ul a {
position: relative;
background-image: url(divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 49px;
padding-left: 49px;
display: block;
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #001B24;
}
div#menu ul > li:last-child {
background-image: none !important;
}
这是 Html:
<ul>
<li><a href="#">Bemutatkozó</li></a>
<li><a href="#">Kínálatunk</li></a>
<li><a href="#">Referenciáink</li></a>
<li><a href="#">Kapcsolat</li></a>
<li><a href="#">Előjegyzés</li></a>
</ul>
我尝试了所有方法,但背景图像不会在最后一个 child 身上消失。请帮忙 :) 提前致谢!
最佳答案
图像似乎位于 li
元素的 a
后代元素上,而不是 li
本身。也就是说,您可以改为尝试:
div#menu ul > li:last-child a {
background-image: none;
}
关于css - last-child 在 UL/LI css 中的使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9136439/