Angular树形视图文本前出现多余空白的问题求助

问题根源是浏览器默认给<ul>标签设置了padding-left内边距，你的嵌套树形组件中，子级的<ul class="tree">继承了这个默认样式，导致第一个元素文本前出现多余空白。

解决方案 #

在tree.component.css中，给.tree类添加padding-left: 0;来重置默认内边距：

.tree {
  padding-left: 0; /* 新增该行，消除ul默认内边距 */
}

.open-btn {
  float: left;
  transform: rotate(90deg);
  position: relative;
  left: -30px;
  z-index: 10;
}

.close-btn {
  float: left;
  left: -30px;
  position: relative;
  z-index: 10;
}

.tree li {
  list-style-type: none;
  margin: 10px;
  position: relative;
}

.arrow-btn {
  width: 18px;
  height: 18px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: -7px;
  left: -20px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 0 0 0 0px;
  width: 20px;
  height: 15px;
}

.tree li::after {
  position: absolute;
  content: '';
  top: 8px;
  left: -20px;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-radius: 0px 0 0 0;
  width: 20px;
  height: 100%;
}

.tree li:last-child::after {
  display: none;
}

.tree li:last-child:before {
  border-radius: 0 0 0 5px;
}

ul.tree > li:first-child::before {
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.label-container {
  display: inline-block;
  /* background-color: rgb(123, 212, 239); */
}

修改后，嵌套子树的<ul>不再带有默认内边距，第一个元素的文本会和父级元素对齐，多余空白将被消除。

内容的提问来源于stack exchange，提问作者blume0F