Question

我需要使所有嵌套的ul li元素的选择框架宽度相同，例如example，

即。因此，当将鼠标悬停在元素上时（整条线应该是可点击的），左边没有空格。我使用AngularJS递归指令来制作这个列表（深度可以变化）。

我的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级深度树。：）

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

1 个答案: