CSS多层手风琴菜单—指针和图标

Question

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

我使用上面的示例为移动网站构建了大型多层手风琴菜单。

一切正常，但是当我减小菜单项的左边距时，一个“>”指针在打开时变成90％，并且文件夹图标塞满了菜单项的文本。

我希望能够减少指针的左边距并删除文件夹图标。

问题更新后的页面：指针和图标重叠

更改页边距和颜色之前的页面

Answer 1

更新

这是一个起点。 我不会为您完成代码。 您应该可以从这里找出其余的内容。 您可以右键单击，检查元素，然后使用CSS来代替在页面和代码之间来回移动（这不会保存，因此请记住将其复制到代码中）。

添加background: none ：

删除菜单文件夹：

.cd-accordion-menu input[type=checkbox]:checked + label::after {
    background-position: -32px 0;
    background: none;
}

删除主文件夹：

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

删除标签文件夹：

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

删除标签图标的左侧位置：

@media only screen and (min-width: 600px)
style.css:211
.cd-accordion-menu ul label::before {
    left: 65px;
}

您可以通过删除以下CSS的padding-left来减少“边距”：

@media only screen and (min-width: 600px)
style.css:206
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 60px;
}

在以下CSS中将填充从60减少到40：

@media only screen and (min-width: 600px)
style.css:208
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 40px;
}

外观如下：

Answer 2

V型和文件夹分别位于:before和:after伪元素中。 他们是绝对的位置。 之前的内部组件具有足够的填充，以使正文在图标之后开始。 您删除了左填充，不再是这种情况。 由于它们不在文档流中，因此不会受到填充更改的影响。

在我看来，您应该自己构建这样的组件，因为任何级别的自定义都需要花费大量的工作来挖掘其他人的代码，而没有任何保证它编写得很好。

如果您只想摆脱设置的图标

   .cd-accordion-menu label::before, 
   .cd-accordion-menu label::after {
      content: none;
   }

您所使用的css看起来像是响应式的，因此请确保在不同的屏幕尺寸上进行测试或删除媒体查询。 它可能会在您的屏幕上看起来不错，但在所有人的屏幕上看起来并不好。

另外，fyi padding vs margin并不是同义词，请确保使用您的意思。 如果您不知道，则应该阅读盒装模型