如何移动对话框标题上的按钮？答案

【问题标题】：How to move buttons on dialog header?如何移动对话框标题上的按钮？
【发布时间】：2018-03-02 04:13:17
【问题描述】：

我想向右移动 3 个按钮（保存、编辑、删除按钮）。谁能告诉我我错过了什么？这是我的代码：

<p-dialog
[(visible)]="display" [draggable] = 'false'>
<p-header>
ACTIVE ALERT
  <button pButton type="button" icon="fa-save" (click)="saveAlert()">
  </button>
  <button pButton type="button" icon="fa-pencil" (click)="editItem()">
  </button>
  <button pButton type="button" icon="fa-trash"></button>
</p-header>
  <textarea [rows]="7" [cols]="60">
  </textarea>
</p-dialog>

我也试过这样做：

“浮动：右”

<div style = "float:right">
  <button pButton type="button" icon="fa-save" (click)="saveAlert()"></button>
 <button pButton type="button" icon="fa-pencil" (click)="editItem()"></button>
<button pButton type="button" icon="fa-trash"></button>
</div>

但它会将所有按钮向右移动并将 CLOSE (X) 按钮向左移动

注意：

单击“显示”按钮以查看我的对话框，该对话框的标题上有按钮。
我想将所有按钮向右移动，并将关闭按钮保持一直向右移动。删除按钮和关闭按钮应该彼此相邻。

【问题讨论】：

标签： css sass

【解决方案1】：

尝试将其添加到您的 CSS 文件中：

.ui-dialog-titlebar-close {
  position:absolute;
  right:0;
}

与：

<div style = "float:right">
  <button pButton type="button" icon="fa-save" (click)="saveAlert()"></button>
 <button pButton type="button" icon="fa-pencil" (click)="editItem()"></button>
<button pButton type="button" icon="fa-trash"></button>
</div>

见Plunker

【讨论】：

我添加了一个 Plunker
现在可以了吗？