html - 子导航点的递减 div 宽度

Question

我正在构建一个 Angular 导航，它加载缩进的子点(我希望这是正确的词)。所以主导航点将位于导航栏的最左侧，子导航点将有一个 margin-left 以让它们缩进一点。此外，子子导航点将具有更高的边距以进一步缩进。

现在就它自己而言，它工作得很好。

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

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

目前，在 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;
}

元素/导航点 - 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>

元素/导航点 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 结构方面无法更改。

我现在的目标是通过进一步的递归步骤减少子项的宽度，以某种方式正确对齐按钮。遗憾的是，摆弄 width 属性并没有给我希望的结果。

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

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

Answer 1

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

.item {
    position:relative;
}

然后用absolute对齐图标。

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

希望对您有所帮助。