Angular-ui-tree 在最后一个 child 有 children 时显示额外的一行

Question

我尝试了不同的 CSS 技巧和窍门，但似乎无法解决这个问题。所以，我有一个带有连接器的 UI 树，如下所示：

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  min-width: 100px;
  min-height: 100px;
  max-height: 256px;
  overflow: auto;
  padding: 4px;
  margin-bottom: 20px;
  color: #369;
  border: solid 1px;
  border-radius: 4px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview,
.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin-left: 1em;
  position: relative
}

.treeview ul ul {
  margin-left: .5em
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  /* creates a more theme-ready standard for the bootstrap themes */
  bottom: 15px;
}

.treeview li {
  margin: 0;
  padding: 0 1em;
  line-height: 2em;
  font-weight: 700;
  position: relative
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 10px;
  height: 0;
  border-top: 1px solid;
  margin-top: -1px;
  position: absolute;
  top: 1em;
  left: 0
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.treeview li button,
.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Treeview List</div>
    <div class="panel-body">
      <!-- TREEVIEW CODE -->
      <ul class="treeview">
        <li><a href="#">Tree</a>
          <ul>
            <li><a href="#">Branch</a></li>
            <li><a href="#">Branch</a>
              <ul>
                <li><a href="#">Stick</a></li>
                <li><a href="#">Stick</a></li>
                <li><a href="#">Stick</a>
                  <ul>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a>
                      <ul>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a></li>
                  </ul>
                </li>
                <li><a href="#">Stick</a></li>
              </ul>
            </li>
            <li><a href="#">Branch</a></li>
            <li><a href="#">Branch</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

这看起来不错，但是当特定节点的最后一个 child 有一个 child 时，问题就出现了。该问题在下面的 link 中重现：

https://jsfiddle.net/3vxjerg2/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  min-width: 100px;
  min-height: 100px;
  max-height: 256px;
  overflow: auto;
  padding: 4px;
  margin-bottom: 20px;
  color: #369;
  border: solid 1px;
  border-radius: 4px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview,
.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin-left: 1em;
  position: relative
}

.treeview ul ul {
  margin-left: .5em
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  /* creates a more theme-ready standard for the bootstrap themes */
  bottom: 15px;
}

.treeview li {
  margin: 0;
  padding: 0 1em;
  line-height: 2em;
  font-weight: 700;
  position: relative
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 10px;
  height: 0;
  border-top: 1px solid;
  margin-top: -1px;
  position: absolute;
  top: 1em;
  left: 0
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.treeview li button,
.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Treeview List</div>
    <div class="panel-body">
      <!-- TREEVIEW CODE -->
      <ul class="treeview">
        <li><a href="#">Tree</a>
          <ul>
            <li><a href="#">Branch</a></li>
            <li><a href="#">Branch</a>
              <ul>
                <li><a href="#">Stick</a></li>
                <li><a href="#">Stick</a></li>
                <li><a href="#">Stick</a>
                  <ul>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a>
                      <ul>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a>
                      <ul>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#">Stick</a></li>
              </ul>
            </li>
            <li><a href="#">Branch</a></li>
            <li><a href="#">Branch</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

如图所示，最后一根树枝有三片叶子，last-child 属性上的 border-left 对我的情况没有帮助。

有什么解决办法吗？

Answer 1

线条由.treeview ul:beforepseudo element的边框生成。由于未定义其高度，它将具有整个 ul 的高度，并且其边框将位于整个 ul.

的左侧

为了缩短这个边框你可以定义:before伪元素的height。

如果您的 HTML 是静态的，您只需将类添加到有问题的 ul 元素并为 .treeview ul.problematic:before 选择器定义一个 height。

https://jsfiddle.net/kc5jx1wy/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  min-width: 100px;
  min-height: 100px;
  max-height: 256px;
  overflow: auto;
  padding: 4px;
  margin-bottom: 20px;
  color: #369;
  border: solid 1px;
  border-radius: 4px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview,
.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin-left: 1em;
  position: relative
}

.treeview ul ul {
  margin-left: .5em
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  /* creates a more theme-ready standard for the bootstrap themes */
  bottom: 15px;
}

.treeview ul.problematic:before {
  height: 238px;
}

.treeview li {
  margin: 0;
  padding: 0 1em;
  line-height: 2em;
  font-weight: 700;
  position: relative
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 10px;
  height: 0;
  border-top: 1px solid;
  margin-top: -1px;
  position: absolute;
  top: 1em;
  left: 0
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.treeview li button,
.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Treeview List</div>
    <div class="panel-body">
      <!-- TREEVIEW CODE -->
      <ul class="treeview">
        <li><a href="#">Tree</a>
          <ul>
            <li><a href="#">Branch</a></li>
            <li><a href="#">Branch</a>
              <ul>
                <li><a href="#">Stick</a></li>
                <li><a href="#">Stick</a></li>
                <li><a href="#">Stick</a>
                  <ul class="problematic">
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a>
                      <ul>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Twig</a></li>
                    <li><a href="#">Twig</a>
                      <ul>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                        <li><a href="#">Leaf</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#">Stick</a></li>
              </ul>
            </li>
            <li><a href="#">Branch</a></li>
            <li><a href="#">Branch</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

但是，如果您的 HTML 是动态生成的，您必须使用 JavaScript 计算每个 ul 所需的 height 并应用 CSS 代码。

Angular-ui-tree 在最后一个 child 有 children 时显示额外的一行

Angular-ui-tree shows an extra line when last child has children

css

treenode

nodes

angular-ui-tree