对齐下拉菜单中的项目答案

【问题标题】：Align items in dropdown Menu对齐下拉菜单中的项目
【发布时间】：2021-09-30 11:23:45
【问题描述】：

我正在开发一个下拉菜单。我希望下拉菜单始终分为两列，并且可以占用几行。我的问题是列不在同一层级，也就是位置有差异。

有人知道如何对齐下拉菜单的所有元素吗？

谢谢。

HTML

<ul class="list-group">
  <div *ngFor="let menu of ArrayMenu">
    <div *ngIf="menu.sons == true">
      <div class="dropright">
        <div class="myListGroup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img class="img-responsive" src="data:image/png;base64,{{menu.icon}}">
          <span>{{menu.desc}}</span>
        </div>
        <div class="dropdown-menu mydropdown">
          <div *ngFor="let item of ArrayMenu">
            <div *ngIf="item.idMenu == menu.id" style="width: 100%;height: 100%;margin: 8px;">
              <div class="divFilhos">
                <img class="img-responsive" src="data:image/png;base64,{{item.icon}}">
                <span>{{item.desc}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ul>

问题

【问题讨论】：

结构有些奇怪，产品项保持在顶部，但为空。

标签： html css angular typescript twitter-bootstrap

【解决方案1】：

在您的HTML 中，您已将margin 赋予项目，将其更改为padding。

<div *ngIf="item.idMenu == menu.id" style="width: 100%;height: 100%;padding: 8px;">

Demo

【讨论】：

有效！谢谢！

【解决方案2】：

由于列的流动特性，您会看到第二列顶部的间隙。您可以通过向子元素添加 'display-inline-block' 来避免它。 Demo

<div *ngIf="item.idMenu == menu.id" style="width: 100%;height: 100%;margin: 8px; display: inline-block;">

【讨论】：