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

У меня есть html файл с неупорядоченным списком. Я хочу показать элементы списка горизонтально, но все равно держать пули. Независимо от того, что я пытаюсь, всякий раз, когда я устанавливаю стиль в линию, чтобы соответствовать горизонтальному требованию, я не могу отобразить маркеры.

Ответ 1

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

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

edit: ^* Текущие читатели учитывают исходную дату публикации. IE7 вряд ли будет проблемой.

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

На самом деле это очень простое исправление. Добавьте в ul:

display:list-item;

Добавление этой строки CSS добавит точки маркера.

Ответ 5

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

Ответ 6

Храните их в заблокированном виде, дайте им ширину и поплавок влево.

Это заставит их сидеть рядом, что похоже на inline и должно поддерживать стиль списка.

Ответ 7

Пробовал ли вы float: left на <li/>? Что-то вроде этого:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        ul li {
            float: left;
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</body>
</html>

Я только тестировал Firefox 3.0.1, там работает. margin устанавливается, потому что иначе ваша пуля перекрывает предыдущий элемент.

дополнение: Будьте осторожны, когда вы плаваете элементы, которые вы удаляете из обычного потока, что, в свою очередь, приводит к тому, что <ul/> не имеет высоты. Если вы хотите добавить границу или что-то еще, вы получите странные результаты.

Один из способов исправить это: добавить в свои стили следующие элементы:

ul {
    overflow: auto;
    background: #f0f;
}

Ответ 8

Я просто возился, и я столкнулся с той же проблемой с теми же ограничениями браузера; когда я искал ответ, ваш пост вышел без ответа. Возможно, это слишком поздно, чтобы помочь вам, но я подумал, что ради потомства я должен опубликовать его.

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

HTML:

<div class="block-list">
  <ul>
    <li><ul><li>a</li></ul></li>
    <li><ul><li>b</li></ul></li>
    <li><ul><li>c</li></ul></li>
  </ul>
</div>

CSS

.block-list > ul > li { display: inline; float: left; }

Страница IE7:

    o a o b o c

... это немое решение, но, похоже, оно работает.

Ответ 9

Вы можете использовать объекты символов, см. ссылку: http://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

Ответ 10

В HTML, я добавил разрыв после каждого li, как это:

<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>

И CSS:

li { float:left; }

Ответ 11

Вы можете использовать следующий код

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