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;
}

离子：标题中的多重按钮显示不正确

1 个答案: