Элементы Navbar не соответствуют друг другу - Jquery mobile

Question

Я занимаюсь разработкой приложения для мобильных устройств Jquery, панель навигации не отображает элементы в строке, а консоль Google Chrome отображает пробелы между элементами списка. Удаляя эти элементы, они идеально выстраиваются в линию. Здесь вы можете увидеть: Navbar ---- Консоль

<div role="main" class="ui-alt-icon ui-nodisc-icon">
            <div data-role="navbar" data-grid="c">
                <ul>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">One</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Two</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Three</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Four</a></li>
                </ul>
            </div><!-- /navbar -->
        </div>

Может кто-нибудь помочь?

Answer 1

Кажется, что есть правило CSS :before (а также :after), который вставляет дополнительное содержимое в элементы списка (в этом случае  пространства)

(или функция jQuery, которая делает то же самое)

Answer 2

Вам не нужно делать это с jQuery для отзывчивой навигации. Для достижения наилучших результатов вы можете использовать стандартную разметку и CSS для этого. Использование CSS display Свойства и медиа-запросы вы можете отображать и скрывать навигационный переключатель на определенной ширине или высоте. Смотрите этот урок для более глубокого ответа.

Answer 3

Когда вы копируете вставку из демоверсии jQuery Mobile в ваш текстовый редактор (конечно, Sublime), он будет нести символы и конвертировать их в nbsp; даже когда вы выбираете сырой код.

Сначала вставьте текст в Блокнот или даже в окно составления Google Mail, затем заново скопируйте и вставьте и выберите произвольное nbsp; персонажи исчезнут.