对齐下拉菜单中的项目

Question

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

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

谢谢。

DEMO

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>

问题

Answer 1

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

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

Demo

Answer 2

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

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