Question

我似乎无法弄清楚如何在jquery移动导航栏中更改列表项的高度。我已经浏览了所有的CSS并试图改变我发现的所有内容，但到目前为止还没有任何工作。希望有人可以帮忙！

以下是代码：

    <div data-role="page" data-theme="a">
        <div data-role="header" style="background: url('../images/stripe.gif') repeat top left;">
            <div data-role="navbar">
                <ul class="custom-navbar">
                    <li><a href="#sun">Sun</a></li>
                    <li><a href="#mon">Mon</a></li>
                    <li><a href="#tue">Tue</a></li>
                    <li><a href="#wed">Wed</a></li>
                    <li><a href="#thu">Thu</a></li>
                    <li><a href="#fri">Fri</a></li>
                    <li><a href="#sat">Sat</a></li>
                </ul>

Here's a link to see how it's rendering.顶部的7个项目（一周中的几天），正如您所看到的，在其边界内部和上方有很多空间。我想要更少的空间。

Answer 1

                    <ul class="custom-navbar ui-grid-f">
                        <li class="ui-block-a"><a href="#sun" data-theme="a" class="ui-btn ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Sun</span></span></a></li>
                        <li class="ui-block-b" style="margin-left: -5px;"><a href="#mon" data-theme="a" class="ui-btn ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Mon</span></span></a></li>
                        <li class="ui-block-c" style="margin-left: -5px;"><a href="#tue" data-theme="a" class="ui-btn ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Tue</span></span></a></li>
                        <li class="ui-block-d" style="margin-left: -5px;"><a href="#wed" data-theme="a" class="ui-btn ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Wed</span></span></a></li>
                        <li class="ui-block-e" style="margin-left: -5px;"><a href="#thu" data-theme="a" class="ui-btn ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Thu</span></span></a></li>
                        <li class="ui-block-c ui-block-f" style="margin-left: -5px;"><a href="#fri" data-theme="a" class="ui-btn ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Fri</span></span></a></li>
                        <li class="ui-block-g" style="margin-left: -5px;"><a href="#sat" data-theme="a" class="ui-btn ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Sat</span></span></a></li>
                    </ul>

有你初始化的网格。您可以看到我向除了第一个padding-left: -5px元素之外的所有元素添加了<li>以取消它们之间的空格。我会使用一个类将margin添加到元素中，或者如果您的目标是支持CSS3的浏览器，那么您可以使用:nth-child()选择器来获取除第一个<li>元素之外的所有元素。

更新

以下是如何更改代码，使其在jQuery Mobile初始化后看起来像上面的代码：

            <ul class="custom-navbar">
                <li><a href="#sun">Sun</a></li>
                <li style="margin-left: -5px;"><a href="#mon">Mon</a></li>
                <li style="margin-left: -5px;"><a href="#tue">Tue</a></li>
                <li style="margin-left: -5px;"><a href="#wed">Wed</a></li>
                <li style="margin-left: -5px;"><a href="#thu">Thu</a></li>
                <li style="margin-left: -5px;"><a href="#fri">Fri</a></li>
                <li style="margin-left: -5px;"><a href="#sat">Sat</a></li>
            </ul>

jQuery Mobile中的navbar height（或padding）

1 个答案:

更新