Как создать список 1.1, 1.2 1.3... HTML?

Я хочу создать вложенные списки HTML, которые имеют следующий формат:

Я попробовал решение, которое я нашел в Интернете:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Но это не помогло мне. Любая помощь пожалуйста??

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

ИЗМЕНИТЬ

нужна полная поддержка IE6

Ответ 1

Это должно сработать. Это плохой способ сделать это, но если вы ДОЛЖНЫ поддерживать IE6 не так много.

      <ol>
        <li><span>1</span> Item
          <ol>
            <li><span>1.1</span> Item</li>
            <li><span>1.2</span> Item</li>
            <li><span>1.3</span> Item</li>
            <li><span>1.4</span> Item</li>
          </ol>
        </li>            
        <li><span>2</span> Item
          <ol>
            <li><span>2.1</span> Item</li>
          </ol>            
        </li>
      </ol>

с css

ol {list-style:none;}

После вашего комментария я немного переделал его.

  <ol>
    <li><span>1</span> Item
      <ol>
        <li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.4</span> <p>Item</p></li>
      </ol>
    </li>            
    <li><span>2</span> Item
      <ol>
        <li><span>2.1</span> Item</li>
      </ol>            
    </li>
  </ol>

И css будет

ol {list-style:none;}
ol li span
{
  display: block;
  float: left;
  width: 30px;
}
ol li
{
 clear:both;
 width: 400px;

}
ol li p
{
  float: left;
  width: 370px;
  margin: 0;

}

Возможно, вам придется настроить ширину.

Ответ 2

этот ответ для первого вопроса. Я предлагаю использовать этот метод, если вы не идете ниже IE8 (IE7 = > ?). для ниже IE7 вы можете использовать ту же логику с jquery.

Оригинальное сообщение от
http://www.w3schools.com/cssref/pr_gen_counter-reset.asp

CSS

ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
    counter-increment:section;
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

HTML

<ul class="numeric-decimals">
<li>Cats</li>
<li>Dogs
    <ul>
        <li>Birds</li>
        <li>Rats</li>
    </ul>
</li>
<li>Rabbits</li>
<li>Ants
    <ul>
        <li>Lions</li>
        <li>Rats</li>
    </ul>
</li>
<li>Ducks</li>

Ответ 3

Элемент before не работает в IE6, но это правильный способ сделать это. Я бы рекомендовал использовать IE7.js, javascript-библиотеку, которая заставляет IE6 вести себя как IE7, где есть javascript и CSS. Другим способом может быть использование javascript-хака, который выполняется только в том случае, если браузер IE6 и перемещает DOM, изменяя элементы списка...

В Для красивого веб-сайта вы можете найти дополнительную информацию о веб-сайтах, совместимых с IE6.

Ответ 4

Отлично работает для меня, в FF 3.6.6, так:

Какой браузер он не работает?
Как выглядит ваша разметка (т.е. правильно ли вы вставляете списки)?

Ответ 5

В этом примере используется атрибут CSS behavior для IE6, чтобы добавить статический маркер перед каждым li. Должна быть какая-то специальная магия, которая может заменить статическую тире счетчиком.

Если вы хотите, чтобы это было решением CSS, используйте это как отправную точку, а затем "MSDN" Google.

ul.example { margin: 0.5em 0; padding: 0 0 0 2em; }
ul.example li
{
    margin: 0.5em 0; padding: 0 0 0 20px;
    list-style-type: none;
    behavior: expression( !this.before
        ? this.before = this.innerHTML = '&mdash;&nbsp;' + this.innerHTML : '' );
    text-indent: -1.24em;
}
ul.example li:before { content: '\2014\a0'; }