带按钮的 jQuery 移动标题位置
我有一个在 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/
我确实看过这个答案但我所做的尝试并没有得到我想要的。
I have a simple app that I am running on an iPhone (iOS 5), which doesn't properly size and position the back button and the header text. The header text winds up being underneath the button. I guess jQuery Mobile doesn't size/position things as expected out of the box...
What I am after is that the header text gets truncated and starts to the right of the back button. There won't be another button to the right of the title, so it is fine if it goes to the right of the page.
<!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>
A runnable example is at: http://jsfiddle.net/5n8WN/
I did look at this answer but what I did try didn't get me what I wanted.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的标题被覆盖的原因是
H1标签的左右两侧有一个90px边距，并且您的后退按钮大于90px代码>.您可以更改.ui-title类的 CSS 规则来解决此问题：这是一个 jsfiddle：http://jsfiddle.net/jasper/5n8WN/1/
The reason your title is being covered is that there is a
90pxmargin on the right/left of theH1tag and your back button is larger than90px. You can change the CSS rules for the.ui-titleclass to fix this:Here is a jsfiddle: http://jsfiddle.net/jasper/5n8WN/1/
示例：
Eample: