DEMO

Question

所以我试图在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>

有什么想法吗？

这是Fiddle。谢谢！

Answer 1

我在联系我们时添加了简单的填充超链接：

.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>

DEMO

注意：这个高度问题只是因为Navbar上的Icon占用了不同的高度他们文本。使用自定义css是个不错的主意。

jQuery Mobile导航栏中的列表项比其他项目小

1 个答案:

DEMO