因此，对于我的 Angular 应用程序，我使用 Kendo-TreeView 组件创建了一个菜单构建器。我希望节点的操作按钮能够很好地对齐在右侧，如您所见......

因此，对于我的 Angular 应用程序，我使用 Kendo-TreeView 组件创建了一个菜单构建器。

我希望节点的操作按钮能够很好地对齐在右侧，正如您在图片中看到的那样。

问题预览以及我希望按钮对齐的位置

现在这是我在 TreeView 中使用 KendoTreeViewNodeTemplate 的代码

<ng-template kendoTreeViewNodeTemplate let-dataItem>
        <div class="menu-tree-line">
          <div class="menu-tree-dataItem">
          <span [ngClass]="{'group-item': dataItem.type === 'GROUP'}">
            @if (dataItem.icon != null && dataItem.icon != '') {
              <i class="{{dataItem.icon}}"></i> -
            }
            {{ dataItem.title }} |
          </span>
          </div>
          <div class="menu-btn-tree-container">
            <app-crm-button [buttonIcon]="'feather icon-edit'"
                            (buttonClick)="openForm(dataItem)"
                            [buttonTooltip]="dataItem.type === 'GROUP' ? 'Bewerk menu groep' : 'Bewerk menu item'"
            >
            </app-crm-button>
            @if (dataItem.type == 'GROUP') {
              <app-crm-button [buttonIcon]="'feather icon-plus'"
                              (buttonClick)="initiateAddChildMenuItem(dataItem)"
                              [buttonTooltip]="'Voeg nieuw sub item toe'"
              ></app-crm-button>
            }
            @if (dataItem.type != 'GROUP') {
              <app-crm-button [buttonIcon]="'feather icon-trash-2'" [buttonColor]="'error'"
                              [buttonTooltip]="'Verwijder menu item'"
                              (buttonClick)="deleteMenuItem(dataItem)"
              >
              </app-crm-button>
            }
            @if (dataItem.type == 'GROUP' && dataItem?.children?.length == null) {
              <app-crm-button [buttonIcon]="'feather icon-trash-2'" [buttonColor]="'error'"
                              [buttonTooltip]="'Verwijder menu groep'"
                              (buttonClick)="deleteMenuItem(dataItem)"
              >
              </app-crm-button>
            }
          </div>
        </div>
      </ng-template>

这是 CSS

.menu-tree-line {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
}

.menu-tree-dataItem {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between the text and icon */
}

.menu-btn-tree-container {
  display: flex;
  gap: 5px;
  margin-left: 10px;
  align-items: flex-end !important;
}

我试图让它与 flexbox 一起工作，但是没有工作。

非常感谢您的帮助。

谢谢！