Question

我正在寻找一种在列表为空时删除“dropdown-menu”<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>

Answer 1

只需在第一个和最后一个孩子上使用padding替换父级margins：

.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顶部和底部填充中使用相同的值和单位。

如何删除下拉菜单上的填充

1 个答案: