Высота навигационной панели (или отступ) в jQuery Mobile

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>

Вот ссылка, чтобы увидеть, как он рендерит. 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>