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

Question

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

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

IE:

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

Desired Style:
1  ______
2  ______
3  ______

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

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

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

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

Answer 2

Вот решение

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

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

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

^^

Answer 3

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

Используемый мной 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 ! */
}

Answer 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 здесь .

Answer 5

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

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