我正在尝试创建一个标题,该标题的左侧有一个按钮,左侧也有一个标题,右侧有6个按钮。但是,仅最后一个按钮显示在右侧,其余按钮显示在左侧。将所有按钮包装在div中时,它们都位于左侧(output)。并且将ionics按钮栏类用于div会在整个宽度上显示它们。
的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
最佳答案
修改后的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;
}