2

我在每个页面的标题中都有一个正确的注销按钮，它是这样定义的：

<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<a href="#home" data-icon="home" data-iconpos="notext"></a>
<h1>Schedule</h1>
<div class="ui-btn-right">
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
.....

这在 1.1.1 中运行良好。但是，当页面在 1.2.0-Beta-1 中显示时，标题如下所示（请注意 X 图标位于主页按钮的水平线下方（大约其高度的 1/2）和单词 Schedule ）。在 1.1.1 中，所有三个都正确排列。

在此处输入图像描述

当然，任何帮助都会受到赞赏。

4

1 回答 1

2

事实上，你不应该在 div 中包含你的右键。

试试：

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>

    </head>

    <body>

        <div data-role="page" id="displaySchedule" data-title="Display Schedule">
            <div data-role="header" data-theme="a">

                <a href="#home" data-icon="home" data-iconpos="notext"></a>
                <h1>Schedule</h1>
                <a class="logoffButton" data-role="button" id="logoffButton"
                    href="#logout" data-icon="delete" data-iconpos="notext"></a>

            </div>
        </div>

    </body>
</html>

截屏

如果要在 header 中添加多个对齐的按钮，可以执行以下操作：

  • 将类 class="ui-btn-right"（或class="ui-btn-left"）添加到您的按钮/链接<a>中，这些按钮将位于标题标题的右侧（左侧）

  • 使用 CSSmargin-right和/或margin-left将不同按钮从同一侧（右/左）分开；否则，按钮将堆叠在一起。

这是一个包含几个按钮的简单示例：

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>        

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>                        
    </head>

    <body>
        <div data-role="page" id="page_1">
            <div data-role="header" data-theme="a">

                <!-- 1st LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-left"></a>

                <!-- 2nd LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-left" style="margin-left: 30px"></a>

                <!-- HEADER TITLE -->   
                <h1>hello</h1>

                <!--  1st RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="gear" data-iconpos="notext" 
                    class="ui-btn-right"></a>

                <!--  2nd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 30px;"></a>

                <!--  3rd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 60px;"></a>

            </div>
        </div>
    </body>
</html>

这是上面示例的屏幕截图：

  • 在纵向模式下：

人像模式

  • 在横向模式下：

横向模式

于 2012-10-04T08:35:11.610 回答