Button 嵌套无填充

我试图为嵌套ulli结构中的按钮创建缩进

我无法更改HTML，因为它是由第三方系统呈现的

HTML

    <ul>
       <li><button>Parent</button>
           <ul>
            <li>
              <button> Child</button>
                 <li><button>Parent</button>
                   <ul>
                    <li>
                     <button> Sibling etc</button>
                    </li>
                  </ul>
               </li>
             </li>
           </ul>
         </li>
      </ul>

我曾想过做类似上述的事情（并尽可能多地考虑级别），但要维持下去将是一场噩梦

当然有一种更优雅的方式来处理这个问题，思想？

我不知道为什么你会想写一篇关于这个的混音

我的解决方案是：

这能帮你解决问题吗？ 生成的CSS如下所示：

好的，所以我想到了一个不同的解决方案，并查看了较少的文档，但潜在的问题是，您无法事先知道嵌套的级别

因此，您必须等待HTML被呈现，然后读取嵌套级别（例如5个级别），并在此基础上生成CSS，这恐怕没有多大意义，需要使用JavaScript来完成

所有这些都是说，你可以使用一些变量来简化你的写作过程，但仅此而已。这里举一个例子：

@padding: 25px;
@addten: 10px;
@selector: ul button;

@selector { @padding; }
ul @selector { @padding + @addten; }
ul ul @selector { @padding + @addten*2; }
ul ul ul @selector { @padding + @addten*3; }

也许你也可以为它创建一个mixin来添加另一层抽象，但正如我所说的，我不会走这么远

---

希望这有帮助。=）

“问题是，因为ul没有边距/填充”-仅当您使用类似的内容时，如果您在大多数标准浏览器中没有（或使用类似的替代内容）具有相应的填充。无论哪种方式，如果您想自己修复它，您应该只为

设置填充/边距，而不是为单个按钮设置填充/边距（除非您需要为每个嵌套级别设置非统一的选项）。我不能向ul添加填充，我需要向每个嵌套按钮添加填充，以创建标准ul列表的效果。根据我的问题，我正在寻找一种更干净的方法来实现这一点，而无需手动创建每个级别，理想情况下，减少循环或混合。感谢您的反馈Marco。嵌套是由从外部系统加载的数据控制的，您的答案几乎是正确的，但在某种程度的嵌套后停止工作。我原以为少一点循环或mixin可以省去我手动创建缩进的麻烦，我可以扩展你的代码并考虑另外3个级别，但我认为可以有一种更优雅的方式来完成。我懂了。嗯，我不太喜欢抽象（variables=ok，mixins=ok，LESS=notok中的逻辑太多），因此这是一个非常直接的解决方案我改变了建议的解决方案。也许这能帮你解决问题，但我认为你要做的是用错误的工具解决逻辑问题。从我的理解来看，LESS不会帮你解决手头的问题。谢谢你，Marco。虽然这并不理想，但如果需要更改缩进量，我将不用手动创建每个级别。

ul ul button {
    padding-left: 25px;
}
ul ul ul button {
   padding-left: 35px;
}

ul ul button {
    padding-left: 25px;
}
ul ul ul button {
    padding-left: 35px;
}

@padding: 25px;
@addten: 10px;
@selector: ul button;

@selector { @padding; }
ul @selector { @padding + @addten; }
ul ul @selector { @padding + @addten*2; }
ul ul ul @selector { @padding + @addten*3; }