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

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

20 голосов
/ 10 января 2011

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

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

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

CSS 

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

Ответы [ 4 ]

17 голосов
/ 10 января 2011

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

См. https://jsfiddle.net/CMKzK/

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

}
ol li {
    float: left;
    margin: 0 10px;
    padding: 0 10px;
}
11 голосов
/ 02 декабря 2013

Вы можете попробовать это: 

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;
}
<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>
5 голосов
/ 10 января 2011

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

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

0 голосов
/ 29 августа 2012

Я решил проблему с перемещением чисел с помощью плавающих влево элементов следующим образом: 

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>

, похоже, работает и с элементами inline-block.

...