purecss pure-menu-item funktioniert nicht richtig

Dieser Menücode ist das erste Beispiel in http://purecss.io/menus/.purecss pure-menu-item funktioniert nicht richtig

Doch es funktioniert schlecht :(

Jeden <li> Artikel bleibt eine Bildschirm des Abstandes voneinander. Wenn Sie nach unten scrollen Sie die anderen Einzelteile zu sehen.

Aber es funktioniert in der purecss.io/menus Seite . ich weiß nicht, warum.

(hier, wenn Sie es funktioniert laufen zu fein ... Sie haben ein hTML-Dokument mit diesem Code erstellen, dann scheitert es ...)

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

Ich habe gesehen, dass pure-menu-item eine height: 100% hat, was meiner Meinung nach ein bisschen seltsam ist. Ist das das Problem?

Quelle

2015-03-13 ijverig

Vielleicht habe ich die Frage missverstanden, aber es scheint gut zu funktionieren, siehe http://jsfiddle.net/yr4hgvr1/. – pschueller

Yeap. Ich habe als Snippet hinzugefügt und es funktioniert auch hier gut. Aber wenn du es nur in ein HTML-Dokument schreibst, schlägt es fehl ... Ich weiß nicht, warum – ijverig

Lade andere CSS-Stile? – pschueller

Ihre HTML ungültig ist, müssen Sie einen Doctype erklären, zum Beispiel:

<!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>

this page finden Sie weitere Informationen darüber, wie Sie Ihre HTML-Datei zu strukturieren.

Quelle

2015-03-13 22:30:13 pschueller

Okay, hat funktioniert. Genial! Können Sie sagen, warum die Höhen dann versagen? Warum ist der Doctype mit diesem Styling verbunden? – ijverig

Der Doctype teilt dem Browser mit, welche Version von HTML Sie verwenden. Wenn Sie es vollständig auslassen, verwendet der Browser quirksmode, der alle möglichen Probleme mit Ihrem Code verursachen kann. Weitere Informationen finden Sie unter http://stackoverflow.com/q/6076432/2126792 und http://en.wikipedia.org/wiki/Quirks_mode – pschueller

Ich hatte das gleiche Problem mit der Verwendung von reinen Menü-Artikel. Es hat tatsächlich eine Höhe von 100%. Ich überschrieb diese Höhe, indem ich style="height:20pt" dem Div hinzufügte, in dem das Menü war. Ich benutzte ein horizontales Menü BTW.

Quelle

2015-07-03 12:28:32

purecss pure-menu-item funktioniert nicht richtig

Antwort

Verwandte Themen