Как я могу показать числа в строчном упорядоченном списке?

У меня есть список.

<ol>
    <li>Login</li>
    <li>Address</li>
    <li>Shipping</li>
</ol>

Он показывает десятичные числа в порядке, но когда я устанавливаю <li> в строковый или встроенный блок, цифры исчезают! Я видел, что в других местах в Интернете упоминалось, что я должен убедиться, что у меня достаточно поля и отступов.. и я уверен, что я это делаю (по 10 пикселей каждого!) Есть ли какая-то другая причина, по которой цифры могут исчезнуть? Я знаю из firebug, что, как только я сниму флажок "inline", они вернутся...

css

ol{
padding: 20px; 
list-style-type:decimal;
}
ol li {
display: inline;
margin: 0 10px;
padding: 0 10px;
}

Ответ 1

Я не знаю, почему это происходит, но его можно решить, плавая слева, а не display:inline

См. http://www.jsfiddle.net/CMKzK/

ol{
padding: 20px; 
    list-style-type:decimal;

}
ol li {
float:left;
margin: 0 10px;
padding: 0 10px;
}

Ответ 2

Вы можете попробовать следующее:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Inline OL</title>
    <style type="text/css">
        ol
        {
            /* List will start at 25 + 1 = 26 */
            /* Remove the 25 if you want to start at 1 */
            counter-reset: LIST-ITEMS 25;
        }

        li
        {
            display: inline;
            padding-right: 0.5em;
        }

        li:before
        {
            content: counter( LIST-ITEMS ) ".";
            counter-increment: LIST-ITEMS;
            padding-right: 0.25em;
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>
<body>

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
    <li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
    <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
    <li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
    <li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
    <li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ol>

</body>
</html>

Ответ 3

Если вам не нравятся старые версии IE, вы можете использовать автоматические счетчики и нумерацию

В противном случае вы должны указать номера вручную (решение @Babiker) или float ваше li (решение @Eric Fortis).

Ответ 4

У меня возникла проблема с оль-числами, которые перемещаются с помощью лево-плавающих элементов со следующим:

li {
    overflow:hidden;
    list-style-position: inside;
    display:block;
}
.number {
    display:list-item;
    position:absolute;
}
.first-item {
    float:left; 
    /* revise margin to your needs */       
    margin-left:35px;
}
.second-item {
    float:left;
}

учитывая следующую DOM:

<ol id="playlist">

        <li>
            <div class="number"></div>
            <a class="first-item" href="#">click here</a>
            <div class="second-item">some detail</div>
        </li>
</ol>

похоже, также работает с элементами встроенного блока.