Question

我需要在有序列表中使用display：flex作为li元素。问题是flex意志隐藏列表编号。以下是一个示例：http://jsfiddle.net/pzpeam7o/

我在li元素中使用span。在调整页面大小时，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;
}

Answer 1

我完全不知道为什么要隐藏它......但是......

解决方案可能是使用CSS Counter模拟小数列表，在列表项上放置: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>

Answer 2

嗯，对于初学者来说，flex model概念错了。 display:flex不在项目上，而是放在容器块上，因此在您的情况下，它应该在<UL>中，如下所示：

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

现在，如果您选中this Fiddle，则会在那里看到您的号码。坏消息：Mozilla中有一个documented bug并且不能与Firefox一起使用，它只显示0。

所以，说到这一切，我建议在这种情况下抛弃Flex模型，或者改变你的方法（为什么不使用带有计数器的div？）因为你正在寻找麻烦和跨浏览器问题而不是值得他们提供的任何解决方案

编辑：现在我看到了LcSalazar's的答案，他还建议使用另一种方式的计数器，所以我想你可以尝试使用我的答案加上LcSalazar的计数器并获得跨浏览器的结果同时仍然使用完整的flex模型。它可能会奏效。

li元素内显示flex隐藏编号

2 个答案: