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>

看起来不错，但是当特定节点的最后一个孩子有一个孩子时，就会出现问题。在下面的链接中重新创建了该问题：

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>

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

对此有什么解决办法吗？

Answer 1

该行由.treeview ul:before pseudo element的边界生成。由于未定义其高度，因此它将具有整个ul的高度，并且其边框将位于整个ul的左侧。

为了缩短此边界，您可以定义height伪元素的:before。

如果您的HTML是静态的，则只需将类添加到有问题的ul元素中，然后将height定义到.treeview ul.problematic:before选择器中即可。

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为每个height计算所需的ul并将CSS与代码一起应用。

当最后一个孩子有孩子时，Angular-ui-tree显示一条额外的线

1 个答案: