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

【问题标题】：Same width of the selection frame on elements of nested lists嵌套列表元素上的选择框宽度相同
【发布时间】：2015-07-24 20:16:52
【问题描述】：

我需要使所有嵌套的 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>';

【问题讨论】：

标签： html css angularjs

【解决方案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 级深度树。 :)

【讨论】：

谢谢，如果树有随机深度，你有什么想法吗？