display flex innerhalb li element blendet nummerierung

Ich brauche display: flex für ein li-element in einer geordneten liste. Das Problem ist der Flex wird die Nummerierung der Liste ausblenden. Hier ist ein Beispiel: http://jsfiddle.net/pzpeam7o/display flex innerhalb li element blendet nummerierung

Ich verwende Spannen innerhalb des Elements li. Der Flex ermöglicht ein besseres Verhalten beim Ändern der Größe der Seite.

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; 
}

Quelle

2014-09-19 DMSilva

Stört es dich zu erwähnen, warum genau du * Display Flex brauchst? – LcSalazar

@LcSalazar: Das würde genau meine Frage sein. – Devin

Ich verwende Spannen innerhalb des Elements li. Der Flex ermöglicht ein besseres Verhalten beim Ändern der Größe der Seite. – DMSilva

Nun, zunächst haben Sie die flex model Konzept falsch. Die display:flex geht nicht auf die Elemente, sondern auf dem Behälterblock, so in Ihrem Fall, sollte es in der <UL>, wie dies:

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

Nun, wenn Sie this Fiddle überprüfen, werden Sie Ihre Zahlen dort sehen. Die schlechte Nachricht: Es gibt eine documented bug in Mozilla und funktioniert nicht mit Firefox, es zeigt nur 0.

Also, mit all dem gesagt wird, würde ich vorschlagen, das Flex-Modell in diesem Fall Graben, oder ändern Sie Ihre Ansatz (warum nicht mit einem Zähler verwenden divs?), weil Sie suchen nach Ärger und Cross-Browser-Probleme nicht wert, was auch immer Lösung sie

EDIT bieten könnte: Jetzt sehe ich LcSalazar's Antwort und er schlägt auch Zähler obwohl mit ein anderer Ansatz, also denke ich, dass Sie versuchen könnten, mit meiner Antwort plus LcSalazars Counter zu spielen und ein Cross-Browser-Ergebnis zu erhalten, während Sie immer noch das Full-Flex-Modell verwenden. Es könnte funktionieren.

Quelle

2014-09-19 21:38:55 Devin

Ich habe absolut keine Ahnung, warum es versteckt es ... aber ...

Eine Lösung könnte das Dezimalsystem Liste werden spöttisch mit einem CSS Counter, platziert mit einem :before Pseudo auf dem Listenelement. So haben Sie die display: flex, und Ihre Zahlen sind immer noch da ...

Noch besser, wenn Sie nur die Zahlen anders stylen möchten, können Sie !!

body { 
 
    counter-reset: section; 
 
} 
 

 
.lst { 
 
\t 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>

Quelle

2014-09-19 21:25:05 LcSalazar

Ich denke, Sie müssen List-style-Typ hinzufügen: keine für Safari, aber nette Idee, doch +1 für Sie. 1 Sache aber: Wie ich in meiner Antwort erwähnt habe, geht Display Flex in die UL, nicht die li – Devin

Danke, das hat mir sehr geholfen. –

display flex innerhalb li element blendet nummerierung

Antwort

Verwandte Themen