0

jquerymobileのフッターの中央にある2つのボタンを揃えたいです。私は自分のコードを以下のjsfiddleに入れました：-

フィドル

私はこれをどのように行うのでしょうか、私はもうすぐそこにいます。

    <div data-role="page" data-theme="b" id="option-page"> 
        <div data-role="content"> 

        </div>
        <div id="homeFooter" class="controlsFooter" data-role="footer" data-position="fixed" data-theme="c">
                <div class="center-wrapper" style="float:left; margin-right:10px;">
                  <a href="#filterPage" data-role="button" data-transition="slide" data-inline="true" data-theme="a" data-icon="check" data-mini="true">Filter</a>
                </div>

                <div class="center-wrapper" style="float:left;">
                        <form name="actions" action="" method="post">
                                <select name="select-action" id="select-action" data-inline="true" data-theme="a" 
                                data-icon="home" tabindex="-1" data-inline="true" data-corners="true" data-iconshadow="true" data-shadow="false">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                </select>
                        </form>
                </div><!-- end of center wrap -->
            </div><!-- /footer -->
    </div>
  • また、ボタンを中央に配置し、インラインで整列させるにはどうすればよいですか。たとえば、Facebookアプリのヘッダー、アイコンボタン、左、中央に3つ、右に1つ？

ありがとう

4

1 に答える 1

1

複数の要素がある場合、それらがインラインまたはインラインブロック要素である場合にのみ、それらを隣り合わせに中央揃えできます。そうでない場合は、中央に配置する必要のある要素の合計幅を計算し、divでそれらを叩く必要があります。その幅のそして次にそのdivにマージン自動を置きます

http://jsfiddle.net/rULKH/101/

あなたの例では、ボタンを中央に配置するためにdivでラップしています。

        <div style="width:150px; margin:auto;">
        <div class="center-wrapper" style="float:left; margin-right:10px;">
          <a href="#filterPage" data-role="button" data-transition="slide" data-inline="true" data-theme="a" data-icon="check" data-mini="true">Filter</a>
        </div>

        <div class="center-wrapper" style="float:left;">
                <form name="actions" action="" method="post">
                        <select name="select-action" id="select-action" data-inline="true" data-theme="a" 
                        data-icon="home" tabindex="-1" data-inline="true" data-corners="true" data-iconshadow="true" data-shadow="false">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                        </select>
                </form>
        </div><!-- end of center wrap -->
</div>

</ p>

于 2013-01-02T13:00:30.017 に答える