web-dev-qa-db-ja.com

ヘッダーの右側にある複数のボタン

ヘッダーバーの右側に複数のボタンが必要です。 docs DIVを使用してカスタマイズできると言っていますが、そうすると、ボタンのスタイルが通常になりません。何かアドバイス？

headerjquery-mobile
25
Keith Adler

私はこれがフッターで行われているのを見ました（ ここに表示 ）、ヘッダーまたはツールバーのアイデアを与えるかもしれません

8
Phill Pafford

上記の例では、ヘッダーに複数のボタンを配置していますが、それらはすべてヘッダーの左側に配置されています。ボタンをコントロールグループにグループ化し、コントロールをヘッダーの右側に配置できると思います。多分このようなもの：

 
 <div data-type = "horizo​​ntal" data-role = "controlgroup" class = "ui-btn-right"> 
 //ここにボタンを配置
 </ div >>

お役に立てれば。

32
chepukha

これは私がそれをした方法です、きれいに見えます。

HTML

<div id="myHeader" data-role="header" data-theme="a">
    <span class="ui-title"></span>
    <div class="ui-btn-right">
        <a id="myButton1" class="headerButton" href="#" data-role="button"></a>
        <a id="myButton2" class="headerButton" href="#" data-role="button"></a>
    </div>
</div>

CSS

.headerButton {
    float: left;
    margin-right: 5px!important;
}
13
Adam Marshall

グリッドクラスを使用できます。

<div class="ui-grid-a ui-btn-right">
        <div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
        <div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>
4
Sam Brown
 <a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left 
    ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel" 
    data-theme="a">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Cancel</span>
      <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
    </span>
 </a>
0
Robert Varga