All geek questions in one place

Display flex inside li element hides numbering

I need to use display: flex for the li element in an ordered list. The problem is the flexibility to hide list numbering. Here is an example: http://jsfiddle.net/pzpeam7o/

I use gaps inside the li element. Flex allows you to improve the behavior when resizing a 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; }
+6
source share
2 answers

Well, for starters, you're wrong about the flex model . display:flex goes not to elements, but to the container block, so in your case it should be in <UL> , for example:

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

Now, if you check this script , you will see your numbers there. The bad news: Mozilla has a documented bug and doesn’t work with Firefox, it only shows 0.

So, with all this, I propose in this case to cancel the Flex model or change the approach (why not use a div with a counter?), Because you are looking for problems and cross browser problems, not worthy of any solution that they could provide

EDIT: Now I see the LcSalazar answer, and it also offers counters, albeit with a different approach, so I think you could try playing with my answer plus the LcSalazar counter and get the cross-browser result, still using the full flexible model. It might work.

+3
source

I have absolutely no idea why he is hiding it ... but ...

The solution can mock the decimal list with a CSS counter placed with the :before alias on the list item. So you have display: flex and your numbers are still there ...

Even better, if you want to style only numbers in different ways, 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>
+4
source

Source: https://habr.com/ru/post/975559/

More articles:


All Articles