CSS组织图表线连接器问题

Question

如何在每个li之间留出令人不安的线路连接器的空间。我申请了margin-top:20px但这个空间也影响了连接线。 如何在li之间添加更多空格，并在线路连接器上应用相同的空间？

JSFIDDLE DEMO

＆＃13;

＆＃13;

.mobile,
.mobile ul,
.mobile li {
  position: relative;
}

.mobile ul {
  list-style: none;
  padding-left: 32px;
}

.mobile li::before,
.mobile li::after {
  content: "";
  position: absolute;
  left: -12px;
}

.mobile li::before {
  border-top: 3px solid #94a0b4;
  top: 9px;
  width: 12px;
  height: 0;
}

.mobile li::after {
  border-left: 3px solid #003B46;
  height: 100%;
  width: 0px;
  top: 2px;
}

.mobile ul>li:last-child::after {
  height: 8px;
}

.mobile #ulCollapse {
  width: 320px !important;
}

.mobile li .emplist {
  border: 1px solid #003B46;
  border-radius: 5px;
  width: 30%;
  height: 35px;
  transition: background-color 0.5s ease;
}

.mobile ul li .emplist:hover {
  background-color: #003B46;
  color: #fff;
}

.mobile li .emplist:hover~ul li .emplist {
  background-color: #07575b;
  color: #fff;
  border: 1px solid #003B46;
  border-radius: 5px;
}


/*Connector styles on hover*/

.mobile li .emplist:hover~ul li::after,
.mobile li .emplist:hover~ul li::before,
.mobile li .emplist:hover~ul::before,
.mobile li .emplist:hover~ul ul::before {
  border-color: #003B46;
}

＆＃13;

<div class="mobile">
  <ul id="ulCollapse">
    <li>
      <div class="emplist">
        Parent 1
      </div>
      <ul>
        <li>
          <div class="emplist">
            child 1.1

          </div>
        </li>
        <li>
          <div class="emplist">
            child 1.2</div>
        </li>
      </ul>
    </li>
  </ul>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

改变一些css＆amp; HTML

.mobile,
        .mobile ul,
        .mobile li {
          position: relative;
        }

        .mobile ul {
          list-style: none;
          padding-left: 32px;
        }

        .mobile li::before,
        .mobile li::after {
          content: "";
          position: absolute;
          left: -12px;
        }

        .mobile li::before {
          border-top: 3px solid #94a0b4;
          top: 25px;
          width: 12px;
          height: 0;
          left:-12px;
        }

        .mobile li::after {
          border-left: 3px solid #003B46;
          height: 100%;
          width: 0px;
          top: 2px;
        }

        .mobile ul > li:last-child::after {
          height: 26px;
        }

        .mobile #ulCollapse {
          width: 320px !important;
        }
        .mobile li .emplist{padding-top:10px;}
        .mobile li .emplist .inner{
          border: 1px solid #003B46;
          border-radius: 5px;
          width: 30%;
          height: 35px;
          transition: background-color 0.5s ease;
        }

        .mobile ul li .emplist .inner:hover {
          background-color: #003B46;
          color: #fff;
        }

        .mobile li .emplist .inner:hover ~ ul li .emplist {
          background-color: #07575b;
          color: #fff;
          border: 1px solid #003B46;
          border-radius: 5px;
        }


        /*Connector styles on hover*/

        .mobile li .emplist:hover ~ ul li::after,
        .mobile li .emplist:hover ~ ul li::before,
        .mobile li .emplist:hover ~ ul::before,
        .mobile li .emplist:hover ~ ul ul::before {
          border-color: #003B46;
        }


    <div class="mobile">
      <ul id="ulCollapse">
        <li>
          <div class="emplist">
          <div class="inner">

            Parent 1

          </div>
          </div>
          <ul>
            <li>
              <div class="emplist">
               <div class="inner">

                child 1.1
     </div>
              </div>
            </li>
            <li>
              <div class="emplist">
                <div class="inner">
                child 1.2</div>
                </div>
            </li>
          </ul>
        </li>
      </ul>

    </div>

https://jsfiddle.net/zmsL4cxc/5/

Answer 2

您可以添加以下CSS

.mobile li{
  width: 100%;
  display: table;
  margin-top: -5px;
}

然后将margin: 5px 0;添加到.mobile li .emplist。当然，你可以改变你想要的差距。只需确保在.mobile li和.mobile li .emplist中进行更改即可。请参阅JSFiddle：https://jsfiddle.net/zmsL4cxc/6/