css3cssinternet-explorerlistalignment

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

просмотры: 31K

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

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 не хочет отображать числа (элементы списка), когда вы перемещаете l, чтобы сделать их горизонтальными.

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

Источник

Ответов (7)

Решение

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

<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>
Источник

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

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

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

Источник

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

li
{
    float: left;
    width:30px;
}
Источник

css: 

li { display:inline; }
Источник

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

li  {display: inline}

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

Источник

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

Источник

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

li {
    плыть налево;
    ширина: 50 пикселей;
    тип-стиль-список: десятичный;
}

Гушикен

Источник