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

StackOverflow https://stackoverflow.com/questions/34399

  •  09-06-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

Вместо этого я собираюсь сделать то, что никто другой не предложил, а значит, и сам ответ, - добавить вручную &bull; в мой HTML, а не стилизовать это. Это далеко не идеально, но это самый совместимый вариант, который я нашел. <Ч>

edit : * Текущие читатели принимают к сведению исходную дату публикации. 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) no-repeat center left;
  padding-left: 20px;
  display: inline;
}

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

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

display:list-item;

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

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

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

Ты пробовал 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;
}

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

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

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

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

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

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

В 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; }

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

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top