छोटे संकल्पों पर नेविगेशन बार रैपिंग

Question

मैं सीखने की प्रक्रिया के रूप में HTML5/CSS3 पर अपना हाथ आजमा रहा हूं लेकिन मैं अपने पृष्ठों में अन्य अनुभागों के लिंक के लिए नेविगेशन बार बनाने के लिए संघर्ष कर रहा हूं। मैंने कोड को एक ट्यूटोरियल से अनुकूलित किया और यह काम करता है, लेकिन जब 1080p के संकल्प पर देखा जाता है, तो चौड़ाई छोटी होती है, तो बार अन्य लाइनों पर लपेटता है।

मैं कैसे सुनिश्चित करूं कि नौसेना बार केवल एक पंक्ति (फिट करने के लिए shrinks) लेता है इससे कोई फर्क नहीं पड़ता कि उपयोगकर्ता किस संकल्प का उपयोग कर रहा है?

यहाँ नेविगेशन बार के लिए मेरे सीएसएस कोड है। कृपया ध्यान दें, बटनों को केंद्रित करने के लिए नेविगेशन के तहत मैंने चौड़ाई को 33.3% तक सेट किया है और पैडिंग को उसी पर सेट किया है। मुझे नहीं पता कि यह कारण है या नहीं।

nav { 
    display:block; 
    position: absolute; 
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600; 
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    display: inline; 
    white-space:nowrap; 
} 

nav ul li { 
    float: left; 
    position: relative; 
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px; 
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757; 
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px; 
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
} 


nav ul ul li a { 
    display: block; 
    width: 200px; 
    text-align: left; 
    padding-left: 3px; 
    font-size: 14px;  
} 



nav ul li:hover>ul{ 
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0; 

} 


nav ul li a:hover { 
    color: #fff; 
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
} 

Answer 1

आपने लगभग सही तरीके से किया है। आपके सीएसएस के साथ समस्या यह है कि white-space: nowrap; केवल inline तत्वों के लिए काम करता है - लेकिन आप float का उपयोग कर रहे हैं। फ्लोट किए गए तत्व ब्लॉक-स्तर बन जाते हैं भले ही आप display: inline; संपत्ति को ऐसे तत्व में सेट करें (यह लागू नहीं होगा)। तो - अगर आप display: inline-block; के साथ अपने तैरता की जगह - अपने white-space संपत्ति काम करेंगे :)

inline-block और white-space यहाँ देखा जा सकता का एक लाइव उदाहरण: http://jsfiddle.net/skip405/wzgcH/

अपने केंद्रित विधि का सवाल है - वहाँ एक बेहतर समाधान है । (आप padding को हटा सकते हैं और उचित चौड़ाई निर्धारित कर सकते हैं) खासकर यदि आप इनलाइन-ब्लॉक का उपयोग कर रहे हैं। बस अपने पैरेंट पर text-align: center; सेट करें - और आप इसे केंद्रित कर लेंगे।

Answer 2

समस्या आप nav चौड़ाई सेट कर रहे हैं बाकी गद्दी होने के साथ एक मात्र 33.3% हो रहा है। तब एक छोटी सी स्वीकार्य जगह एक निश्चित बिंदु से पहले एक दूसरे के नीचे सभी तत्वों को धक्का दे रही है। इसे होने से रोकने के लिए आप दो चीजें कर सकते हैं, नेविगेशन चौड़ाई को 100% होने के लिए सेट करें, और दूसरा, यदि आप इसे आकार बदलना नहीं चाहते हैं तो आपको इसे a के योग का min-width देना होगा तत्वों की चौड़ाई एक साथ रखी। आपको सबसे अधिक संभावना है कि इसे max-width दें, साथ ही जब तक आप एक उत्तरदायी डिज़ाइन का उपयोग नहीं कर रहे हों। यहां एक डेमो है जिसे मैंने आपके संशोधित सीएसएस के साथ रखा है: http://jsfiddle.net/c3HE6/