Question

在我的移动应用程序页面的标题中，我有：

    <header data-role="header">
        <h1>title</h1>
        <select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="myapp-shareicon" data-iconpos="notext" onchange="handleSocialShare()">
            <option value="facebook">Share on Facebook</option>
            <option value="twitter">Tweet</option>
            <option value="email">Email</option>
        </select>
      <a href="#creditspage" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
    </header>

但是选择按钮在下一行，而我希望它在同一行。我尝试了一些东西，但我无法使其发挥作用。你能帮我找到合适的CSS吗？

Answer 1

http://jsfiddle.net/kadaj/593Ba/

<header data-role="header" class="header">
    <span class="title">title</span>
    <div class="share-it-wrapper">
        <select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="myapp-shareicon" data-iconpos="notext" onchange="handleSocialShare()">
            <option value="facebook">Share on Facebook</option>
            <option value="twitter">Tweet</option>
            <option value="email">Email</option>
        </select>
    </div>
    <a href="#creditspage" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
</header>

css

.header {
    padding: .5em;
}
.title {
    font-weight: bold;
    font-size: 16px;
    padding: .5em;
}
.share-it-wrapper {        
    margin: -2.4em 0 0 3em;
}

Answer 2

试试这个：

<select data-inline="true" name="select-choice-share" id="select-choice-share" class="ui-btn-left shareitbutton" data-icon="myapp-shareicon" data-iconpos="notext">
            <option value="facebook">Share on Facebook</option>
            <option value="twitter">Tweet</option>
            <option value="email">Email</option>
</select>

我添加了data-inline属性和类ui-btn-left。

此外，您需要一些CSS，.ui-select默认情况下为relative位置：

.ui-header .ui-select{
    position: absolute;
    top: .3125em;
}

演示here。

jquery mobile：在选择按钮之前防止换行

2 个答案: