Почему использование столбцов CSS3 в Chrome удаляет номера позиций в списках

Я заметил, что хром удалял число в моих списках, когда добавляю css для управления столбцом-счетчиком...

Например:

<ol style =-webkit-column-count: 2;...">
   ....
</ol>

Вышеописанное позволяет переливать li в отдельный столбец по назначению, но также удаляет нумерацию элементов по умолчанию. Этого не происходит в Firefox, только хром.

Любые идеи?

Ответ 1

Вы всегда можете просто выбросить <div> вокруг <ol> и указать <div> несколько столбцов вместо <ol>.

<div style = -webkit-column-count: 2;...><ol>
    ....
</ol></div>

Однако, когда я это делаю, я заканчиваю тем, что по второй причине второй столбец является одной строкой выше 1-го столбца. Также происходит только в Chrome.

Изменить: решение моей проблемы было только для добавления нулевого поля для <ol>, поэтому это должно работать нормально:

<div style = -webkit-column-count: 2;...><ol style = margin: 0;>
    ....
</ol></div>

Как ни странно, наличие некоторого дополнения в <ol> также избавляет от чисел, поэтому, если у вас есть где-нибудь, что может быть виновником.

Ответ 2

Кажется, цифры действительно скрыты. Это можно решить, используя следующее свойство:

OL {
  list-style-position: inside;
}

Ответ 3

Часто в одной таблице стилей должен быть html reset, среди которых есть элементы padding: 0; reset.

в то время как Stéphane работает как шарм,

ul {
  list-style-position: inside;
}

вы также можете присвоить своим элементам списка padding-left:

padding-left: 16px;

Ответ 4

По какой-то причине стили списка, расположенные вне элемента (по умолчанию), скрыты при применении правила column-width. Ниже приведено лучшее, что я мог придумать, чтобы попытаться подражать "ожидаемому" поведению в Chrome на основе других ответов и моих собственных экспериментов.

Демо

HTML

<div class="col-wrapper">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>
</div>

CSS

.col-wrapper {
    -moz-column-width: 200px;
    -moz-column-gap: 1em;
    -webkit-column-width: 200px;
    -webkit-column-gap: 1em;
    column-width: 200px;
    column-gap: 1em;

    /* (optional) use ol margin here */
    margin-top: 16px;
}

.col-wrapper ol {
    /* clear top margin of ol */
    margin-top: 0;
}