我试图去掉左边的边距:10px;从我的主导航中的第一个菜单项。我正在为我的网站使用wordpress自定义导航。
我尝试了:first-child方法,但这似乎删除了所有链接的边距,而不仅仅是第一个链接。你知道还有其他方法可以做到这一点吗?以下是我的菜单的html:
<div class="menu-links">
<div class="menu-menu-1-container"><ul id="menu-menu-1" class="menu"><li id="menu- item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4"><a href="http://hadston.immaculate.co.uk/">overview</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Strategy</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="#">business</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#">leadership</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">governance</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">csr</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu- item-11"><a href="#">sustainability</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">careers</a></li>
</ul></div> </div>
</div>
CSS:
ul.menu li,a {
text-decoration: none;
display: inline;
padding-bottom:5px;
margin-left: 10px;
}
ul#menu-menu-1 > li,a:first {
margin-left: 0px;
}
最合适的回答,由SO网友:gdaniel 整理而成
您的代码:
ul#menu-menu-1 > li,a:first {
margin-left: 0px;
}
您需要将第一个子元素应用于列表元素,而不是链接。您也不应该有逗号。逗号表示新选择。
尝试以下操作:
ul#menu-menu-1 > li:first-child a{
maegin-left:0px;
}
*第一个孩子在ie8及更早版本中不工作。