0

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

    <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 吗？

4

2 回答 2

0

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;
}
于 2013-08-14T12:02:47.357 回答
0

试试这个：

<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;
}

演示在这里。

于 2013-08-14T12:07:19.673 回答