display flex inside li element nasconde la numerazione

Ho bisogno di usare display: flex per un elemento li in una lista ordinata. Il problema è che il flex nasconde la numerazione delle liste. Ecco un esempio: http://jsfiddle.net/pzpeam7o/display flex inside li element nasconde la numerazione

Sto usando span all'interno dell'elemento li. Il flex consente un comportamento migliore durante il ridimensionamento della pagina.

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

fonte

2014-09-19 DMSilva

Ti spiace menzionare perché esattamente * hai * bisogno di visualizzare il flex? – LcSalazar

@ LcSalazar: questa sarebbe stata esattamente la mia domanda. – Devin

Sto usando span all'interno dell'elemento li. Il flex consente un comportamento migliore durante il ridimensionamento della pagina. – DMSilva

Beh, per cominciare è necessario il concetto flex model sbagliata. Il display:flex va non sugli oggetti, ma sul blocco contenitore, in modo nel tuo caso, dovrebbe essere in <UL>, in questo modo:

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

Ora, se controlli this Fiddle, vedrete i numeri lì. La cattiva notizia: c'è un documented bug in Mozilla e non funziona con Firefox, mostra solo 0.

Quindi, con tutto ciò detto, suggerirei di abbandonare il modello Flex in questo caso, o cambiare il tuo approccio (perché non utilizzare div con un contatore?), perché siete alla ricerca di problemi e trasversale problemi di browser non degne di qualsiasi soluzione che potrebbero fornire

EDIT: Ora vedo LcSalazar's risposta e lui suggerisce anche i contatori anche se con un altro approccio, quindi penso che potresti provare a giocare con la mia risposta più il contatore di LcSalazar e ottenere un risultato cross browser mentre usi ancora il modello full flex. Potrebbe funzionare.

fonte

2014-09-19 21:38:55 Devin

Non ho assolutamente idea del perché si nasconde ... ma ...

Una soluzione potrebbe essere beffardo lista decimali con un CSS Counter, posizionato con uno pseudo :before sulla voce di elenco. In questo modo hai il display: flex ei tuoi numeri sono ancora lì ...

Ancora meglio, se vuoi modellare solo i numeri in modo diverso, puoi !!

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>

fonte

2014-09-19 21:25:05 LcSalazar

Penso che dovrai aggiungere un tipo di stile lista: nessuno per Safari, ma comunque una buona idea, +1 per te. 1 cosa però: come ho accennato nella mia risposta, display flex va in ul, non li – Devin

Grazie, questo mi ha aiutato molto. –

display flex inside li element nasconde la numerazione

risposta

Problemi correlati