Question

我试图用Wordpress的CSS来玩一点。但是，我尝试了很多东西，但由于某些原因我无法解决它。

我想在菜单栏中的链接之间留出更多空间，所以我添加了填充。我创建了以下代码：

.main-navigation li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;

这里是其他CSS代码

.main-navigation a {
display: block;
text-decoration: none;
color: white;


.main-navigation a:hover {
    text-decoration: underline;
}


.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
    background-color: black;
}


.main-navigation ul ul a {
    background-color: rgba(0, 0, 0, 0.5);
    width: 200px;
}

这对我有用，并在菜单栏中创造了更多的空间，但它也在下拉菜单中添加了填充到了链接，这不应该完成。我尝试了很多东西，但似乎我无法解决它。有人能告诉我我能做什么吗？请看下面看看我的意思。

Screenshot of the problem

Answer 1

添加此

.main-navigation ul ul li {
  padding-right: 0;
}

Answer 2

您发布的CSS声明<li>表示＆＃34;定位.main-navigation＆＃34;的后代的每个<li>。因此，下一级列表中的>元素也会成为目标。

您可以使用.main-navigation > li { display: inline-block; float: none; list-style-type: none; padding-right: 30px; }子选择器仅选择父级的直接子级。因此，以下代码应该适合您，而不会影响下拉元素：

$arr = [1,2,3];
$copy=$arr;  // preserve the original
print_r($arr); echo"<br>";    
$x = &$arr[1];
$arr2 = $arr;
print_r($arr); print_r($arr2); echo"<br>";
$x = 8;
print_r($arr); print_r($copy); echo"<br>";

在Wordpress的下拉菜单中填充

2 个答案: