дисплей flex внутри элемента li скрывает нумерацию

мне нужно использовать display: flex для элемента li в упорядоченном списке. Проблема флекс будет скрыть нумерацию списка. Вот пример: http://jsfiddle.net/pzpeam7o/

Я использую пяди внутри элемента li. Flex позволяет улучшить поведение при изменении размера страницы.

HTML-код: 

<!DOCTYPE html>

<head lang="en">
    <title></title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <ul>
        <li class="lst"> First item</li>
        <li class="lst"> Second item</li>
        <li class="lst"> Third item</li>
        <li class="lst"> Fourth item</li>
    </ul>
</body>

CSS:

.lst {
    list-style-type: decimal;
    display: flex;
}
6
css flexbox html list

2 ответов

Ну, для начала у вас есть flex model концепция неправильная. The display:flex идет не по элементам, а по контейнерному блоку, поэтому в вашем случае он должен быть в <UL>, например:

ul {
    display: flex;
}
.lst {
    list-style-type: decimal;
    margin:auto;
}

Теперь, если вы проверить эта скрипка, вы увидите свои номера там. Плохая новость: есть документированная ошибка в Mozilla и не работает с Firefox, он показывает только 0.

Итак, со всем этим сказанным, я бы предложил бросить Flex модель в этом случае, или изменить свой подход (почему бы не использовать divs со счетчиком?) потому что вы ищете проблемы и кросс-браузерные проблемы, не достойные любого решения, которое они могли бы предоставить

EDIT: теперь я вижу LcSalazar это ответ, и он также предлагает счетчики, хотя с другим подходом, поэтому я думаю, что вы можете попробовать играть с моим ответом плюс счетчик LcSalazar и получить результат кросс-браузера, все еще используя полную модель flex. Это может работа.

3

Я понятия не имею, почему он скрывает это... но...

решение может издеваться над десятичным списком с помощью счетчик CSS, размещен с :before псевдо в элементе списка. Таким образом у вас есть display: flex, и ваши номера еще есть...

еще лучше, если вы хотите, чтобы стиль только цифры по-другому, вы можете!!

body {
    counter-reset: section;
}

.lst {
	display: flex;
}

.lst:before {
    counter-increment: section;
    content: counter(section) ".";
    position: absolute;
    margin-left: -20px;
}
<ul>
    <li class="lst"> First item</li>
    <li class="lst"> Second item</li>
    <li class="lst"> Third item</li>
    <li class="lst"> Fourth item</li>
</ul>
4