DMS*_*lva 6 html css list flexbox
我需要在有序列表中使用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;
}
我完全不知道为什么它隐藏它......但是......
一个解决方案可能是用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>好吧，对于初学者来说，你的弹性模型概念是错误的。不是display:flex在物品上，而是在容器块上，所以在你的情况下，它应该在 中<UL>，如下所示：
ul {
display: flex;
}
.lst {
list-style-type: decimal;
margin:auto;
}
现在，如果你检查这个 Fiddle，你会在那里看到你的号码。坏消息：Mozilla 中存在一个已记录的错误，并且不适用于 Firefox，它只显示 0。
因此，尽管如此，我建议在这种情况下放弃 Flex 模型，或者改变你的方法（为什么不使用带有计数器的 div？），因为你正在寻找不值得的麻烦和跨浏览器问题他们可以提供的解决方案
编辑：现在我看到LcSalazar 的答案，他还建议使用另一种方法，所以我认为你可以尝试使用我的答案加上 LcSalazar 的计数器并获得跨浏览器结果，同时仍然使用完整的弹性模型。它可能会起作用。
| 归档时间： |
|
| 查看次数： |
1598 次 |
| 最近记录： |