因此,我试图在导航栏中添加带有三个列表项的导航栏到jQuery Mobile中。第一个和最后一个是数据图标,而中间的是简单文本。问题在于中间的项目(与我们联系)比其他两个项目短,我想不出一种使它们相等的方法。这是我的代码:
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed">
<h1 style="width:90%; margin:0 auto;">Title</h1>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home"></a></li>
<li><a href="#" class="ui-btn-active">Contact Us</a></li>
<li><a href="#" data-icon="home"></a></li>
</ul>
</div>
</div>
</div>
有任何想法吗?
这是小提琴。谢谢!
我在与我们联系的超链接上添加了简单的填充:
.contact-us{padding: 12px;}
这是页脚标记:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home"></a></li>
<li><a href="#" class="ui-btn-active contact-us">Contact Us</a></li>
<li><a href="#" data-icon="home"></a></li>
</ul>
</div>
</div>
注意:此高度问题仅是由于导航栏上的图标采用不同高度的文字所致。使用自定义CSS是一个不错的主意。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句