嵌套填充少

Question

我正在尝试为嵌套的ul li结构内的按钮创建缩进。

我无法更改第三方系统呈现的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>

ul和li没有边距或填充，因此我们的想法是简单地向按钮元素添加填充。

问题是，由于ul没有边距/填充，所以按钮都从完全相同的点开始，并且（无论它们嵌套多深）都具有完全相同的缩进。

LESS

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

我想过做上面这样的事情（尽可能多地考虑这个级别），但维持这将是一场噩梦。

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