Question

我想向右移动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）按钮移到左侧

注意：

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

Answer 1

尝试在CSS文件中添加：

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

with：

<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

如何在对话框标题上移动按钮？

1 个答案: