Question

我正在使用Jquery Mobile，我正在尝试在标题的右侧放置两个按钮。

        <header data-role="header">
            <h1>Myapptitle</h1>
            <div class="share-it-wrapper">
                <select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="app-shareicon" data-theme="a" data-iconpos="notext" onchange="handleSocialShare()">
                    <option value="no"></option>
                    <option value="facebook"><img src="images/fb.png" />Facebook</option>
                    <option value="twitter"><img src="images/twitter.png" />Tweeter</option>
                    <option value="email"><img src="images/email.png" />Email</option>
                </select>
            </div>
        <a href="#creditspage" data-icon="info" data-theme="a" data-iconpos="notext" class="ui-btn-right">Credits</a>
        </header>

目前，我的按钮未对齐： enter image description here

doc表示使用data-role="controlgroup" and data-type="horizontal"，但如果我将按钮包装到<div data-role="controlgroup" data-type="horizontal">，那么#creditspage按钮就会变成文本...... JQM中是否有错误（如果是文档）似乎也有问题）。如何才能实现右侧按钮的完美对齐？感谢

Answer 1

您可以使用类ui-btn-right包围div中的两个按钮。这将div放在标题的右侧。然后你需要一个小小的CSS来将2个按钮内联并且彼此相邻。

<header data-role="header">
     <h1>Myapptitle</h1>

    <div class="ui-btn-right">
        <div class="share-it-wrapper">
            <select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="app-shareicon" data-theme="a" data-iconpos="notext" onchange="handleSocialShare()">
                <option value="no"></option>
                <option value="facebook">
                    <img src="images/fb.png" />Facebook</option>
                <option value="twitter">
                    <img src="images/twitter.png" />Tweeter</option>
                <option value="email">
                    <img src="images/email.png" />Email</option>
            </select>
        </div> 
        <a href="#creditspage" data-icon="info" data-theme="a" data-iconpos="notext" data-role="button" class="headerButton">Credits</a>
    </div>
</header>

使这项工作的CSS在jQM 1.3和1.4中略有不同。

对于1.3：

.headerButton, .share-it-wrapper {
    float: left;
    margin-right: 5px!important;
}
.headerButton {
    margin-top: 8px!important;
}

对于1.4：

.headerButton, .share-it-wrapper {
    display: inline;
    margin-right: 5px!important;
}
.share-it-wrapper .ui-select{
    display: inline;    
}

1.3 DEMO

1.4 DEMO

Jquery Mobile：在标题中向右浮动几个按钮

1 个答案: