树形菜单的CSS垂直线答案

【问题标题】：CSS Vertical line for tree menu树形菜单的CSS垂直线
【发布时间】：2017-08-17 18:47:04
【问题描述】：

我正在为子菜单项制作树形视图，我几乎完成了。最后一个元素的问题，现在的样子：

我想看起来像：

HTML：

  <ul class="menu-items">
    <li>
      <a href="#">Example 1</a>
    </li>
    <li>
      <a href="#">Tree</a>
      <ul class="sub-items">
        <li>
          <a href="#">Item 1</a>
        </li>
        <li>
          <a href="#">Item2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Example 2</a>
    </li>
    <li>
      <a href="#">Example 3</a>
    </li>
  </ul>

和样式：

.menu-items
  li
    padding 9px 0
    list-style-type none
    &.active
      a
        color $text-color
        font-weight 700

  .sub-items
    padding-left 15px
    padding-top 5px

    li
      position relative
      border-left 1px solid #000

    li::before
      position relative
      top -4px
      width 15px
      border-bottom 1px solid #000
      content ''
      display inline-block

最好的方法是什么？

【问题讨论】：

How to get a tree in HTML using pure CSS的可能重复
@SamuilPetrov 如果可能的话，我想了解如何解决我的代码问题。我知道有很多方法可以做到这一点。

标签： html css

【解决方案1】：

尝试添加到您的 CSS

li:last-child {
 height: 1px;
}

查看演示http://jsbin.com/tigepavemi/1/edit?html,css,output

【讨论】：

确实如此。有用。谢谢！！！将在 10 分钟内接受答复，所以现在不要给我做，
清洁解决方案+1

【解决方案2】：

您可以在最后一个li 上使用额外的pseudoelement

.menu-items li {
  padding: 9px 0;
  list-style-type: none;
}

.menu-items li.active a {
  color: red;
  font-weight 700
}

.sub-items {
  padding-left: 15px;
  padding-top: 5px;
}

.sub-items li {
  position: relative;
  border-left: 1px solid #000;
}

.sub-items li::before {
  position: relative;
  top: -4px;
  width: 15px;
  border-bottom: 1px solid #000;
  content: '';
  display: inline-block;
}

.sub-items li:last-of-type {
  border-left: none;
}

.sub-items li:last-of-type:after {
  position: absolute;
  left: 0;
  top: 0;
  height: 18px;
  border-left: 1px solid #000;
  content: '';
  display: inline-block;
}

<ul class="menu-items">
  <li>
    <a href="#">Example 1</a>
  </li>
  <li>
    <a href="#">Tree</a>
    <ul class="sub-items">
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>
        <a href="#">Item2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Example 2</a>
  </li>
  <li>
    <a href="#">Example 3</a>
  </li>
</ul>

【讨论】：

【解决方案3】：

您可以将此代码添加到您的 css 中

.menu-items .sub-items li {
    position: relative;
    border-left: 0px;
}

.menu-items .sub-items li:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1px;
    height: 100%;
    background: #000;
}
.menu-items .sub-items li:last-child:after {
    height: 50%;
}

【讨论】：