嵌套列表元素上的选择框架的宽度相同

Question

我需要使所有嵌套的ul li元素的选择框架宽度相同，就像这个example，

也就是说，当鼠标悬停在元素上(整行应该是可点击的)时，左边就没有空格了。我使用AngularJS递归指令来创建这个列表(深度可以改变)。

Here's what I've got now，到目前为止还找不到答案。

我的CSS：

div[data-tree-model] li span:hover {
   background-color: #D7D7D7;
   border: 1px solid #A2A3A6;
   display: block; 
}

div[data-angular-treeview] {
   /* prevent user selection */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   /* default */
   font-family: Tahoma;
    font-size:13px;
   color: #2E9BDB;
   text-decoration: none;
   font-weight: bold;
}
div[data-tree-model] ul {
   margin: 0;
   padding: 0;
   list-style: none;
   overflow: hidden;

}
div[data-tree-model] li {
   position: relative;
   padding: 0 0 0 20px;
}
div[data-tree-model] li span {
   cursor: pointer;
   white-space: nowrap;
   border: 1px solid transparent;
   display: block;
   width: 100%;
}

指令模板：

//tree template
var template =
    '<ul>' +
       '<li data-ng-repeat="node in ' + treeModel + '">' +
          '<span href="#" data-ng-class="{\'selected\': node.selected == true , \'collapsed\': node.' + nodeChildren + '.length && node.collapsed, \'expanded\': node.' + nodeChildren + '.length && !node.collapsed, \'folder\': node.' + nodeChildren + '.length}" data-ng-click="' + treeId + '.selectNodeLabel(node)" title={{node.' + nodeLabel + '}}>{{node.' + nodeLabel + '}}</span>' +
          '<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
        '</li>' +
     '</ul>';

Answer 1

如果树状视图将保持3级深。然后我们就可以做like this了。在你的CSS中，你需要删除下面的填充：

div[data-tree-model] li {
    position: relative;
   //padding: 0 0 0 20px;
}

并且需要添加这个CSS：

div[data-angular-treeview] > ul > li > span {
  padding: 0 0 0 20px;
}
div[data-angular-treeview] > ul > li > div > ul > li > span {
  padding: 0 0 0 40px;
}
div[data-angular-treeview] > ul > li > div > ul > li > div > ul > li > span {
  padding: 0 0 0 60px;
}
div[data-angular-treeview] > ul > li > div > ul > li > div > ul > li > div > ul > li > span {
  padding: 0 0 0 80px;
}

此解决方案适用于通过您的指令创建的当前HTML DOM的3层深度树。:)