html - ionic : multible buttons in header not displaying correct

Question

我正在尝试创建一个左侧有一个按钮的页眉，左侧还有一个标题，右侧有 6 个按钮。但是，只有最后一个按钮显示在右侧，其余按钮显示在左侧。当将所有按钮包装在一个 div 中时，所有按钮都在左侧(output)。并为 div 使用 ionics 按钮栏类在整个宽度上显示它们。

html:

<ion-header-bar style=" background-color:#3A5B89">
      <button menu-toggle="left" > menu</button>
    <h1 class="title" style=" text-align:left; color:white;">Medexter Demo KIS</h1>
      <div class="BTNright">
      <button class="button button-clear button-light BTNright" >Print</button>
      <button class="button button-clear button-light BTNright">Back</button>
      <button class="button button-clear button-light BTNright">Redo</button>
      <button class="button button-clear button-light BTNright">Search</button>
      <button class="button button-clear button-light BTNright">Help</button>
      <button class="button button-clear button-light BTNright">Log Out</button>
      </div>
  </ion-header-bar>

BTNright 样式:

.BTNright{
float:right ;
font-size: 80%;

编辑: How it currently looks like

Answer 1

修改后的 HTML

<ion-header-bar style=" background-color:#3A5B89">
      <button menu-toggle="left" > menu</button>
    <h1 class="title" style=" text-align:left; color:white;">Medexter Demo KIS</h1>
      <div class="BTNright">
      <button class="button button-clear button-light  " >Print</button>
      <button class="button button-clear button-light  ">Back</button>
      <button class="button button-clear button-light  ">Redo</button>
      <button class="button button-clear button-light  ">Search</button>
      <button class="button button-clear button-light  ">Help</button>
      <button class="button button-clear button-light  ">Log Out</button>
      </div>
  </ion-header-bar>

CSS

.BTNright{
position:absolute ;
right:0px;
}