我有一个在 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/
我看过this answer但我所做的尝试并没有让我得到我想要的。
最佳答案
您的标题被覆盖的原因是 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/
关于带有按钮的 jQuery 移动标题位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8301632/