purecss puro-menu-item non funziona correttamente

Questo codice di menu è il primo esempio in http://purecss.io/menus/.purecss puro-menu-item non funziona correttamente

Eppure funziona male :(

Ogni elemento <li> rimane una schermata di distanza una dall'altra. Se si scorre verso il basso si vedono le altre voci.

ma funziona nella pagina purecss.io/menus . non so perché.

(Qui quando si esegue funziona bene anche ... è necessario creare un documento HTML con questo codice, quindi non riesce ...)

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="pure-menu"> 
 
    <span class="pure-menu-heading">Yahoo Sites</span> 
 

 
    <ul class="pure-menu-list"> 
 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a> 
 
     </li> 
 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a> 
 
     </li> 
 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a> 
 
     </li> 
 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a> 
 
     </li> 
 
     <li class="pure-menu-heading">More Sites</li> 
 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a> 
 
     </li> 
 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a> 
 
     </li> 
 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

ho visto che ha un pure-menu-itemheight: 100%, che credo sia un po 'strano. È questo il problema?

fonte

2015-03-13 ijverig

Forse ho frainteso la domanda, ma sembra funzionare bene, vedi http://jsfiddle.net/yr4hgvr1/. – pschueller

Yeap. Stavo aggiungendo uno snippet e funziona anche qui. Ma se lo metti solo in un documento html fallisce ... Non so perché – ijverig

Stai caricando altri stili CSS? – pschueller

tuo HTML non è valido, è necessario dichiarare un doctype, ad esempio:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" /> 
</head> 
<body> 
    <div class="pure-menu"> 
     <span class="pure-menu-heading">Yahoo Sites</span> 

     <ul class="pure-menu-list"> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a> 
     </li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a> 
     </li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a> 
     </li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a> 
     </li> 
     <li class="pure-menu-heading">More Sites</li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a> 
     </li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a> 
     </li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a> 
     </li> 
     </ul> 
    </div> 
</body> 
</html>

Vedi this page per ulteriori informazioni su come strutturare il file HTML.

fonte

2015-03-13 22:30:13 pschueller

OK, ha funzionato. Eccezionale! Puoi dire perché le altezze falliscono allora? Perché il doctype è legato a questo stile? – ijverig

Il doctype indica al browser quale versione di HTML stai usando. Se lo lasci completamente, il browser utilizzerà la modalità quirk che può causare tutti i tipi di problemi con il tuo codice. Per maggiori informazioni vedi http://stackoverflow.com/q/6076432/2126792 e http://en.wikipedia.org/wiki/Quirks_mode – pschueller

Avevo lo stesso problema con l'utilizzo di puro-menu-elemento. Ha infatti un'altezza di 100%. Ho sovrascritto quell'altezza aggiungendo style="height:20pt" al div in cui si trovava il menu. Ho usato un menu orizzontale btw.

fonte

2015-07-03 12:28:32

purecss puro-menu-item non funziona correttamente

risposta

Problemi correlati