.tree li a { width:100%; color:#369; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; line-height: 1.5em; -webkit-line-clamp: 1; } .tree .indicator { position: absolute; top: 2px; left:-8px; display: inline-block; line-height: 1; font-size: 1.5em; cursor: pointer; background-color: #fff; } .tree > li > .indicator { left: 0px; } .tree > li > a { padding-left: 0.5em; } .tree li button, .tree li button:active, .tree li button:focus { text-decoration: none; color:#369; border:none; background: transparent; margin: 0; padding:0; outline:0; } .tree li.cur > i, .tree li.cur >a{ color: #d72825; } /************************************************** * tree1 *************************************************/ .tree1, .tree1 ul { margin:0; padding:0; list-style:none; } .tree1 ul:before { content:""; display:block; width:0; position:absolute; top:0; bottom:0; left:0; border-left:1px solid; } .tree1 ul li:before { content:""; display:block; width: 8px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0; } .tree1 ul { margin-left: 1em ; position:relative; } .tree1 ul ul { margin-left:.5em } .tree1 li { color:#369; padding-left:1em; line-height:2em; font-weight:700; position:relative; cursor: pointer; } .tree1 > ul > li { margin-left: 0px; } .tree1 ul li:last-child:before { background:#fff; height:auto; top:1em; bottom:0; } /* /************************************************** * tree5 **************************************************/ .tree5 .indicator { top: 3px; right: 5px; left:auto; position: absolute; background-color: #fff; margin-right:5px; color:#999; }