0

我希望能够在 jquery mobile 中对齐页脚中心的两个按钮。我已将我的代码放在下面的 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 应用的 Header，图标按钮，左边，中间 3，右边 1？

谢谢

4

1 回答 1

1

如果您有多个元素，则只能将它们彼此居中对齐（如果它们是内联或内联块元素），否则您将需要计算出需要居中的元素的总宽度，将它们放在 div 中那个宽度，然后把margin auto放在那个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 回答