logo标签列表

jQuery移动端按钮标题位置

jqueryhtmlcssjquery-mobile
3
我有一个简单的应用程序，在iPhone（iOS 5）上运行，但是返回按钮和标题文本的大小和位置不正确。标题文本最终会在按钮下面。我猜想jQuery Mobile不能按预期的方式自动调整大小/位置...
我的要求是，标题文本被截断并从返回按钮的右侧开始。标题旁边不会有另一个按钮，所以如果它移到页面的右侧，也没有问题。
    <!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>        
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
            <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>    </head>
        <body>
            <div data-role="page">
                <div data-role="header">
                    <a data-icon="arrow-l" data-rel="back">A long button</a>
                    <h1>A very very very long title</h1>
                </div>

                <div data-role="content">
                    <p>Page content goes here.</p>   
                </div>

                <div data-role="footer">
                    <h4>Page Footer</h4>
                </div>
            </div>
        </body>
    </html>

可运行的示例位于：http://jsfiddle.net/5n8WN/

我确实看过这个答案，但是我尝试的东西没有得到我想要的结果。

2个回答
3

您的标题被覆盖的原因是因为在 H1 标签的右/左侧有一个 90px 的边距，而您的返回按钮比 90px 更大。您可以更改 .ui-title 类的 CSS 规则来解决此问题：

.ui-title {
    margin     : 0.6em 1em 0.8em 140px !important;
    text-align : left !important;
}

这里有一个 jsfiddle 示例：http://jsfiddle.net/jasper/5n8WN/1/

2
自定义头部配置
如果您需要创建一个不遵循默认配置的头部，请在头部容器内部使用包含自定义样式的容器div，并且插件将不会应用自动按钮逻辑，因此您可以编写用于布局头部内容的自定义样式。
还可以完全不使用头部data-role来创建自定义栏。例如，从任何容器开始并添加ui-bar类以应用标准栏填充，并添加ui-bar-b类以分配主题中的栏色彩样式（“b”可以是任何色彩字母）。

示例:

<div class="ui-bar ui-bar-b">
    <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接