HTML + CSS: упорядоченный список без периода?

Я думаю, что ответ на этот вопрос не... но кто-нибудь знает способ HTML/CSS для создания упорядоченного списка без периода после чисел? Или, альтернативно, для указания символа разделителя?

В идеале я не хочу делать list-style-image с другим классом для каждого номера, но это все, о чем я мог думать до сих пор... Это кажется ужасно неземным.

IE:

Default Style:
1. ______
2. ______
3. ______

Desired Style:
1  ______
2  ______
3  ______

Alternate Style:
1) ______
2) ______
3) ______

Ответы

Ответ 1

Это можно сделать только с помощью CSS (2.1):

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

Имейте в виду, что это решение зависит от: перед псевдоселектором, поэтому некоторые старые браузеры - в частности IE6 и IE7 - не будут отображать сгенерированные числа. Для этих браузеров вам нужно добавить дополнительное правило CSS, которое предназначено только для использования обычного стиля списка:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

Ответ 2

Вот решение

Число вложенных упорядоченных списков в HTML

Все, что вам нужно, немного меняется здесь.

ol li:before {
                content: counter(level1) " "; /*Instead of ". " */
                counter-increment: level1;
            }

Ответ 3

Я только что нашел обходное решение для случаев, когда вы хотите просто удалить точку. Не лучшее решение когда-либо, но оно выполняется только с CSS и работает в каждом браузере. Недостатком является то, что вам нужен текстовый индекс в LI, который будет завернут в другой тег (<span> или что-то еще). В моем случае, <ol> использовался как список ссылок, поэтому я мог использовать теги <a> !

Используемый мной CSS:

ol li a {
    float: right;
    margin: 8px 0px 0px -13px; /* collapses <a> and dots */
    padding-left: 10px; /* gives back some space between digit and text beginning */
    position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
    background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}

Ответ 4

Вы можете добавить числа позже, используя jQuery:

$("ul").each(function() {
   $(this).find("li").each(function(index) {
      $(this)
        .css("list-style-type", "none")
        .prepend("<div class='listnumber'>" + (index + 1) + "</div>");
   })
})

Попробуйте образец здесь.

Подробнее о jQuery здесь.

Ответ 5

Это самое простое решение без встречного увеличения и встроенных тегов внутри li:

ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}

Ответ 6

Кажется, что вы напуганы периодами:) Я думаю, что единственный способ - создать список самостоятельно с помощью <ul>