我正在寻找一种方法来删除“下拉菜单”上的填充 <ul>
列表为空时标记,因此不会显示任何内容,而是显示对应于填充的狭窄空间。
我不想做 .dropdown{padding: 0}
,因为它会在不为空时删除必要的填充。但是.dropdown:empty{padding:0}
不起作用,因为内容不为空,仅由 *ngIf 过滤(我猜,虽然我知道 Angular 会从 DOM 中删除元素)。
<ul role="menu" class="dropdown-menu">
<li *ngFor="let option of options">
<span *ngIf="option.condition;then template1 else template2">
</span>
<ng-template #template1>some content</ng-template>
<ng-template #template2>some content</ng-template>
</li>
</ul>
最佳答案
只需用第一个和最后一个子节点的边距
替换父节点的padding
:
.dropdown-menu {
padding-top: 0;
padding-bottom: 0;
}
.dropdown-menu > li:first-child {
margin-top: 15px;
}
.dropdown-menu > li:last-child {
margin-bottom: 15px;
}
注意这里的选择器是通用的。您需要更改它们以应用于您的特定示例,并且不影响可能不应该受到影响的 .dropdown-menu
的其他实例。
此外,15px
是通用尺寸。您应该使用 与 .dropdown-menu
顶部和底部填充中现在相同的值和单位。
关于css - 如何删除下拉菜单上的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44990707/