html - 对齐下拉菜单中的项目

Question

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

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

谢谢。

演示

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>

问题

标签： htmlcssangulartypescripttwitter-bootstrap

Answer 1

在您HTML已给予margin的物品中，将其更改为padding.

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

演示