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

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

45 голосов
/ 29 августа 2008

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

Ответы [ 11 ]

38 голосов
/ 29 августа 2008

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

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

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

21 голосов
/ 14 октября 2008

У меня была такая же проблема, но только в 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 будет работать так же.

9 голосов
/ 29 августа 2008

Вы также можете использовать фоновое изображение для элементов

с отступом, чтобы текст не перекрывал его. 
li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}
4 голосов
/ 15 ноября 2013

Это на самом деле очень простое исправление. Добавьте следующее к ul: 

display:list-item;

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

4 голосов
/ 29 августа 2008

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

3 голосов
/ 29 августа 2008

Держите их дисплей заблокированным, укажите ширину и оставьте их влево.

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

1 голос
/ 09 декабря 2015

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

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

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

... это глупое решение, но, похоже, оно работает.

1 голос
/ 29 августа 2008

Вы пробовали 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;
}
0 голосов
/ 11 сентября 2017

В 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; }
0 голосов
/ 12 марта 2015

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

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...