在 li 元素内显示 flex 隐藏编号答案

【问题标题】：display flex inside li element hides numbering在 li 元素内显示 flex 隐藏编号
【发布时间】：2014-09-23 02:03:32
【问题描述】：

我需要对有序列表中的 li 元素使用 display: 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;
}

【问题讨论】：

您介意提一下为什么您需要 display flex吗？
@LcSalazar：这正是我的问题。
我在 li 元素中使用 spans。调整页面大小时，flex 允许更好的行为。

标签： html css list flexbox

【解决方案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>

【讨论】：

我认为您需要为 Safari 添加 list-style-type:none ，但还是个不错的主意，为您 +1。 1 件事：正如我在回答中提到的，display flex 进入 ul，而不是 li
谢谢，这对我帮助很大。

【解决方案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 的计数器并在仍然获得跨浏览器结果的同时使用全弹性模型。它可能会起作用。

【讨论】：