Горизонтальный упорядоченный список (и IE)

Question

Я хочу сгенерировать вывод, похожий на этот:

1. One      2. Two      3. Three      4. Four

из следующего HTML-кода

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ol>

Похоже, что Internet Explorer не хочет отображать числа (элементы списка), когда вы перемещаете li, чтобы сделать их горизонтальными.

Кто-нибудь сталкивался с этим и нашел решение, которое я могу использовать?

Answer 1

Можете ли вы использовать этот CSS?

li  {display: inline}

РЕДАКТИРОВАТЬ : Это не сохраняет нумерацию элементов, и я не знаю ни одного метода, который делает. В качестве замены, я думаю, все, что вы можете сделать, это вставить цифры вручную, пока браузеры не получат лучшую поддержку счетчиков CSS.

Answer 2

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

<ol style="list-style-type:decimal; width: 600px;">
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>

ol.horizontal{
    list-style-type: decimal;
    width: 600px;
}

ol.horizontal li{
    float: left;
    width: 200px;
    padding: 2px 0px;
}

<ol class="horizontal">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ol>

Answer 3

Хорошо, вам нужно добавить в CSS атрибут float, width и list-style-type. Выглядит так:

li{
    float:left;
    width:50px;
    list-style-type:decimal;
}

Gushiken

Answer 4

Я пробовал каждое свойство display на этой странице , и ни один из них не сохраняет упорядоченные номера списка при отображении списка по горизонтали в IE (и при этом они не сохраняются в Firefox, Opera или Safari для Windows - и, возможно, Google Chrome, хотя, признаюсь, я не проверял каждое свойство display).

Единственное решение, которое (частично - только в Firefox) работает, это ответ Al W .

Я думаю, что если вам нужен горизонтальный нумерованный список, вам придется сгенерировать его на сервере или манипулировать списком на клиенте, используя JavaScript для повторной вставки чисел.

Answer 5

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

li
{
    float: left;
    width:30px;
}

Answer 6

Я нашел эта страница о IE hasLayout полезной. Включает обсуждение такого форматирования списка (ссылка указывает на раздел списков на странице)

Answer 7

css:

li { display:inline; }