Question

我正在使用CMS。我有一个菜单。我当然能够编辑菜单类，但不能编辑li类。我想做的就是使用保证金在每个链接之间添加一些空格。但CSS没有工作??

CSS我正在尝试使用课程：

#block-system-main-menu li.menu__item is-leaf first leaf a{
    margin-bottom:15px;

}

这不对吗？

HTML

<div id="block-system-main-menu" class="block block-system contextual-links-region block-menu first last odd" role="navigation">
<div class="contextual-links-wrapper contextual-links-processed">
<ul class="menu">
<li class="menu__item is-leaf first leaf">
<li class="menu__item is-leaf leaf">
<li class="menu__item is-leaf leaf">
<li class="menu__item is-leaf leaf">
<li class="menu__item is-leaf leaf">
<li class="menu__item is-leaf leaf">
<li class="menu__item is-leaf last leaf">
<a class="menu__link active" title="" href="/">Contact Us</a>
</li>
</ul>
</div>

Answer 1

a上的边距将被忽略，除非它显示为block / inline-block。

如果您有多个类，那么您需要将它们与.连接起来，因为否则css会错误地将它们用于元素名称（正如Benjamin所指出的那样）

为了使更大的区域可点击，我建议使用填充而不是边距，但这取决于你想要的。

#block-system-main-menu li.menu__item.is-leaf.leaf a
{
    padding-bottom: 15px;
    display: inline-block;
}

http://jsfiddle.net/7SWB4/

Answer 2

li.menu__item是叶第一叶a

这假设您在元素a内的元素leaf内部有元素first等等。类名称不应包含空格。空格分隔不同的类元素。

所以在你的情况下你可以离开：

    #block-system-main-menu li.menu__item

保证金将适用于所有列表元素

CSS-无法在链接之间添加边距？

2 个答案: