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

Posted 2023-03-06

【中文标题】如何删除下拉菜单上的填充

【英文标题】：How to remove the padding on a dropdown-menu

【发布时间】：2017-12-12 22:16:54

【问题描述】：

我正在寻找一种在列表为空时删除“下拉菜单”<ul> 标记上的填充的方法，因此没有显示任何内容，而不是显示对应于填充的狭窄空间。 我不想做.dropdownpadding: 0，因为当它不为空时它会删除必要的填充。但是.dropdown:emptypadding: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>

【问题讨论】：

你可能对 javascript 或/和 jQuery 有很好的了解，所以只需检查 .dropdown-menu 或其他 div 是否有子元素...如果现在，设置 .css('padding','0px')

从.dropdown-menu 中删除填充并使用li 或其中的内容的填充，这样如果没有li 就没有填充

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

【讨论】：

您给了我使用内容的想法，而不是我顽固地试图操纵的“下拉菜单”。 :last-child/:first-child 没有用，但是将 template1 和 template2 内容的类跨越了 margin-top:0.5em ； margin-bottom:0.5em 成功了！