3

ヘッダーの左右に 2 セットのボタンを配置しようとしていますが、すべてを並べて左右に適切にフロートさせるのに問題があります。これを達成するための簡単な方法についてのアイデア。

     <div data-theme="a" data-role="header" data-position="fixed">
<!-- back button -->                    
       <a style=" margin:5px 0 10px 0;" data-role="button" 
    data-transition="slide" data-theme="b" href="#track_dash" 
    data-icon="arrow-l" data-iconpos="left">
          Back
       </a>

<!-- chart switch -->                    
            <div data-role="fieldcontain" style="float: right;">
                <form action="#" method="POST">
                    <fieldset data-role="controlgroup" data-type="horizontal" >
                       <input name="radiobuttons5" id="radio7" value="radio1" type="radio" />
                       <label for="radio7">
                            List
                       </label>
                       <input name="radiobuttons5" id="radio8" value="radio8" type="radio" />
                       <label for="radio8">
                            Chart
                       </label>
                    </fieldset>
                </form>
            </div>

      </div>

左側のデザイン/右側の実際のコード化されたデザイン

4

2 に答える 2

16

class="ui-btn-left戻るボタンとコントロール グループで使用しますclass="ui-btn-right"。

両方の要素の間に少なくとも空のヘッダーを配置する必要があるかもしれません<h1></h1>

于 2012-05-23T15:17:12.463 に答える
7

あなたはおそらく今までに解決策を考え出しましたが、私はフッターでこれを行い、うまくいきました：

<div data-role="footer" class="ui-bar" data-position="fixed" data-id="myFooter">
    <div class="footerContainer">    
        <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-left">Cancel</a>
        <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-right">Next</a>
    </div>
</div>

基本的に、ボタンを div でラップし、ui-btn-left と right を使用してボタンをフロートさせ、適切に配置できるようにしましたが、これまでのところ競合は発生していないようです。

ここにCSSがあります

.footerContainer{
    width:97%;
    height:38px;
    border:none;
    position:relative;
    }

100% は幅に加えてパディングと position:relative を使用するため、フロートが含まれるため、幅を 97% に設定します。

于 2012-09-05T15:16:27.057 に答える