Как преобразовать список с графическими ссылками во встроенный список?

Учитывая этот HTML:

<ul id = "topnav">
    <li id = "topnav_galleries"><a href = "#">Galleries</a></li>
    <li id = "topnav_information"><a href = "#">Information</a></li>
</ul>

И этот CSS:

#topnav_galleries a, #topnav_information a {
    background-repeat: no-repeat;
    text-indent: -9000px;
    padding: 0;
    margin: 0 0;
    overflow: hidden;
    height: 46px;
    width: 136px;
    display: block;
}
#topnav { list-style-type: none; }
#topnav_galleries a { background-image: url('image1.jpg'); }
#topnav_information a { background-image: url('image2.jpg'); }

Как мне превратить список topnav во встроенный список?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
424
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Попробуй это:

#topnav {
    overflow:hidden;
}
#topnav li {
    float:left;
}

А для IE вам нужно будет добавить следующее:

#topnav {
    zoom:1;
}

В противном случае ваши плавающие теги <li> будут выливаться из содержащего <ul>.

Альтернативой перемещению элементов влево является следующее:

#topnav li {
    display: inline;
}

Другой подход - использовать display: inline-block для li:

#topnav li {
    display: inline-block;
}

Другие вопросы по теме