子导航点的递减div宽度

Question

我正在构建一个angular的导航，它加载缩进的子点（我希望它是正确的单词）。 因此主导航点将位于导航栏的最左侧，子导航点将具有左边距，以使它们缩进一点点。此外，子子导航点将具有更高的余量，以使它们进一步缩进。

现在就可以了，这很好用。

我的问题是我还需要在导航栏的右侧显示没有缩进的按钮。

由于导航是递归加载的，而按钮是针对各个导航点的，因此我无法将它们放在父级中。

目前，html / css明智，这看起来有点像这样：

家长 - html

<div class="nav">
  <items [items]="items" [subNavToggle]="false"></items>
</div>
<div class="content">
  <content></content>
</div>

父母 - css

.nav {
  float: left;
  width: 245px;
  align-items: stretch;
  padding-left: 14px;
}

item / navpoint - hmtl

<div class="item" [class.subnav]="subNavToggle">
  <div class="link"><a [routerLink]="[item.path]">{{ item.label }}</a></div>
  <div class="edit-button"><img [src]="icon" /></div>
<div class="children indented">
  <items [items]="items.children" [subNavToggle]="true"><items>
</div>

item / navpoint css

.item.subnav {
  font-size: 100%;
  width: 100%;
}

.indented{
  margin-left: 10px;
}

.item {
  font-size: 105%;
  margin-top: 8px;
  height: 20px;
  width: 231px;
  word-wrap: break-word;
  display: flex;
  text-align: center;
  border-bottom: 1px solid #e0dede;
}

.link {
  width: 80%;
  display: flex;
  height: 20px;
}

.edit-button {
  float: right;
  width: 24px;
  text-align: right;
  padding-left: 12px;
  height: 24px;
}

现在由于在具有缩进类的项内部的递归调用的div，我进入的子导航越往下，它进一步缩进。 问题是按钮，进一步缩进（？）它们被进一步向右推。我希望它们与导航框右边界的距离相同。

项目内部按钮的html结构方面很遗憾不会改变。

我现在的目标是减少子项的宽度，每个进一步的递归步骤以某种方式正确对齐按钮。可悲的是，宽度属性没有给我带来我希望的结果。

与上面的代码一样，整个事情看起来像这样：

现在，如何正确对齐所有按钮？

Answer 1

尝试在.item类上添加相对位置。

.item {
    position:relative;
}

然后使用absolute来对齐图标。

.edit-button {
    position:absolute;
    right:0; or right:10px;
}

希望有所帮助。