在标题jQuery Mobile中添加一个开关

Question

我正在尝试向标头添加一个开关。它工作正常，但开关在下一行，我想它在标题的右边

代码：

<div data-role="page" id="moreevents">
    <div data-role="header" data-position="fixed">
        <a href="#defaultclub" data-icon="arrow-l" data-theme="b" onclick="getClubData(curClub)" id="backtoclub">Back</a>
        <h1>All Events</h1>
        <div align="right">
            <select name="switch" id="alleventsswitch" data-role="slider">
            <option value="off">No Past</option>
            <option value="on">Past</option>
            </select>
        </div>
    </div>
</div>

工作示例：

http://jsfiddle.net/Y9ntF/

Answer 1

点击此处查看演示http://jsfiddle.net/yeyene/Y9ntF/1/

您需要减少默认的h1宽度和边距，以便为switch留出空间。

HTML

<div data-role="page" id="moreevents">
    <div data-role="header" data-position="fixed">
        <a href="#defaultclub" data-icon="arrow-l" data-theme="b" onclick="getClubData(curClub)" id="backtoclub">Back</a>
        <h1 id="myTitle">All Events</h1>
        <span id="mySelect">
            <select name="switch" id="alleventsswitch" data-role="slider">
            <option value="off">No Past</option>
            <option value="on">Past</option>
            </select>
        </span>
    </div>
</div>

CSS

#myTitle{
    float:left;
    width:20%;
    margin: .6em 0 .8em 40%;
}
#mySelect{
    float:right;
    z-index: 1;
}