purecss pure-menu-item ठीक से काम नहीं करता

यह मेनू कोड http://purecss.io/menus/ में पहला उदाहरण है।purecss pure-menu-item ठीक से काम नहीं करता

अभी तक यह बुरा :(

प्रत्येक <li> आइटम काम करता है दूरी एक-दूसरे के screenful रहता है। आप नीचे स्क्रॉल आप अन्य वस्तु को देखते हैं।

लेकिन यह purecss.io/menus पेज में काम करता है । मैं नहीं पता है क्यों।

(यहाँ जब आप इसे ठीक भी काम करता है चलाने ... आप तो यह विफल रहता है, इस कोड के साथ एक एचटीएमएल दस्तावेज़ बनाने के लिए है ...)

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

मैंने देखा है pure-menu-item एक height: 100% है, जो मुझे लगता है कि थोड़ा अजीब है है। क्या यह समस्या है?

स्रोत

2015-03-13 ijverig

शायद मैंने सवाल को गलत समझा, लेकिन ऐसा लगता है कि यह ठीक काम कर रहा है, http://jsfiddle.net/yr4hgvr1/ देखें। – pschueller

हाँप। मैं एक स्निपेट के रूप में जोड़ रहा था और यह भी ठीक काम करता है। लेकिन अगर आप इसे केवल एक HTML दस्तावेज़ में डालते हैं तो यह विफल हो जाता है ... मुझे नहीं पता क्यों – ijverig

क्या आप कोई अन्य सीएसएस शैलियों को लोड कर रहे हैं? – pschueller

आपका HTML अमान्य है, तो आप उदाहरण के लिए एक डॉक प्रकार की घोषणा करने, की जरूरत है:

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

कैसे अपने HTML फ़ाइल की संरचना करने के बारे में अधिक जानकारी के लिए this page देखें।

स्रोत

2015-03-13 22:30:13 pschueller

ठीक है, काम किया। बहुत बढ़िया! क्या आप बता सकते हैं कि ऊंचाई क्यों विफल हो जाती है? इस स्टाइल से संबंधित सिद्धांत क्या है? – ijverig

डॉक्ट टाइप ब्राउज़र को बताता है कि आप किस HTML का उपयोग कर रहे हैं। यदि आप इसे पूरी तरह से छोड़ देते हैं तो ब्राउज़र क्विर्कमोड का उपयोग करेगा जो आपके कोड के साथ सभी प्रकार की समस्याओं का कारण बन सकता है। अधिक जानकारी के लिए http://stackoverflow.com/q/6076432/2126792 और http://en.wikipedia.org/wiki/Quirks_mode देखें – pschueller

मुझे शुद्ध-मेनू-आइटम के उपयोग के साथ एक ही समस्या थी। यह वास्तव में 100% की ऊंचाई है। मैं उस ऊंचाई को style="height:20pt" जोड़कर उस ऊंचाई को ओवरराइट करता हूं जहां मेनू था। मैंने एक क्षैतिज मेनू btw का उपयोग किया।

स्रोत

2015-07-03 12:28:32

purecss pure-menu-item ठीक से काम नहीं करता

उत्तर

संबंधित मुद्दे