我需要使用display:flex为有序列表中的li元素。问题是 flex 会
隐藏列表编号。这是一个示例:http://jsfiddle.net/pzpeam7o/
我在li元素内部使用了spans。当调整页面大小时,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;
}
最佳答案
好吧,对于初学者来说,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模型的情况下获得跨浏览器的结果。它可能会起作用。