Как отобразить неупорядоченный список в строку с маркерами?

Лучший вариант, который я видел в других ответах, — это использовать float:left;. К сожалению, он не работает в IE7, что здесь является обязательным требованием^*^ — вы все равно теряете маркер. Я не очень хочу использовать фоновое изображение.

Вместо этого (что никто другой не предложил, поэтому я и пишу свой ответ) я решил вручную добавить • в мой HTML, вместо того чтобы стилизовать этот элемент. Это не идеальный вариант, но это наиболее совместимый способ, который я нашёл.

редактировать: ^* Текущие читатели, обратите внимание на дату оригинального поста. IE7 вряд ли сейчас представляет собой существенную проблему.

У меня была такая же проблема, но только в Internet Explorer (я тестировал версию 7) — в Firefox 3 или Safari 3 такого не наблюдалось. Использование селектора *:before сработало для меня:

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

В данном случае я использую квадратный маркер, но обычный маркер \2022 будет работать так же.

Вы также можете использовать фоновое изображение для элементов <li>, добавив отступ, чтобы текст не накладывался на него.

li {
  background-image: url(i/bullet.gif);
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 20px;
  display: inline;
}

Таким образом, изображение будет отображаться слева от текста, а отступ слева предотвратит наложение текста на фоновое изображение.

Браузер отображает маркеры, потому что свойство стиля "display" изначально установлено в "list-item". Изменение свойства display на "inline" отменяет все специальные стили, присвоенные элементам списка. Вы можете попытаться сымитировать это с помощью селектора :before и свойства content, но Internet Explorer (по крайней мере, до версии 7) не поддерживает их. Вероятно, наилучший кроссбраузерный способ сделать это — использовать фоновое изображение.

Можно оставить элементы с display: block, задать им ширину и использовать float: left. Это позволит им располагаться рядом друг с другом, как при использовании inline, и при этом сохранит стиль списка.