Menu
I need to use display: flex for a li element in an ordered list. The problem is the flex will hide the list numbering. Here is an example: http://jsfiddle.net/pzpeam7o/
I am using spans inside the li element. The flex allows better behavior when resizing the page.
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;
}
787
I have absolutely no idea why it hides it... but...
A solution might be mocking the decimal list with a CSS Counter, placed with a :before pseudo on the list item. This way you have the display: flex, and your numbers are still there...
Even better, if you want to style only the numbers differently, you can!!
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>Well, for starters you have the flex model concept wrong. The display:flex goes not on the items but on the container block, so in your case, it should be in the <UL>, like this:
ul {
display: flex;
}
.lst {
list-style-type: decimal;
margin:auto;
}
Now, if you check this Fiddle, you'll see your numbers there. The bad news: there's a documented bug in Mozilla and doesn't work with Firefox, it only shows 0.
So, with all this being said, I'd suggest to ditch the Flex model in this case, or change your approach (why not use divs with a counter?) because you're looking for trouble and cross browser issues not worthy of whatever solution they could provide
EDIT: Now I see LcSalazar's answer and he also suggests counters although with another approach, so I think you could try playing with my answer plus LcSalazar's counter's and get a cross browser result while still using full flex model. It might work.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
