如何在使用面板中的按钮时将切换图标保持在最右边，PrimeNg

Question

我正在使用带有 PrimeNg 的可切换面板，我希望放置一个按钮，右对齐，但位于切换图标的左侧。到目前为止，我的 html 中有以下内容：

<p-panel
  header="Testing Toggle"
  [style]="{ width: '100%' }"
  [collapsed]="collapsed"
  [toggleable]="true">
<p-header>
  <button
    pButton
    label="Clear"
    icon="pi pi-refresh"
    class="ui-button-warning"
    style="float: right; margin-right: 5px;">
  </button>
</p-header>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Itaque nisi iste praesentium, voluptatibus nam facere omnis
  deleniti natus pariatur sed officiis minus illum harum ad beatae alias. 
  Consequuntur, debitis atque.
</p-panel>

正如预期的那样，使用按钮上的 float: right，按钮在 header 中一直向右移动，迫使切换图标向左移动：

有没有办法使用此按钮或 ui-panel-titlebar-toggler class 将切换图标保持在最右侧，并将按钮放在它的左侧？

我也尝试过将 .ui-panel-titlebar-toggler 与 float: right 属性一起使用，希望它能一直推过去，但这并没有改变任何东西。

Answer 1

堆栈闪电战：https://stackblitz.com/edit/angular6-primeng-hxpmbm

您必须给出 margin-right 的百分比才能使其适用于所有分辨率。哪个元素最需要右边给负 margin-right.

.ui-panel .ui-panel-titlebar-icon{
    width: 6%!important;
    margin-right: -26%!important;
    margin-top: 6px!important;
}

这个你必须在 styles.css

中添加

和

<button
    pButton
    label="Clear"
    icon="pi pi-refresh"
    class="ui-button-warning"
    style="float: right;margin-right: 7%;width:16%"
  >
  </button>

如何在使用面板中的按钮时将切换图标保持在最右边，PrimeNg

How to keep toggle icon on far right while using buttons in panel, PrimeNg

css

primeng