我正在构建一个 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 属性并没有给我希望的结果。
现在,如何让所有按钮正确对齐?
最佳答案
尝试在 .item 类上添加相对位置。
.item {
position:relative;
}
然后用absolute对齐图标。
.edit-button {
position:absolute;
right:0; or right:10px;
}
希望对您有所帮助。
关于html - 子导航点的递减 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45275772/