1

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

https://jsfiddle.net/jqaw41mo/

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我的情况没有帮助。

有什么解决办法吗？

4

1 回答 1

0

线条由.treeview ul:before 伪元素的边框生成。由于没有定义它的高度，它将具有整个的高度ul，并且它的边界将在整个的左侧ul。

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

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

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 与代码一起应用。

于 2019-01-28T10:08:55.757 回答