सीएसएस सूची आइटम चौड़ाई/ऊंचाई काम नहीं करती

Question

मैंने नेविगेशन इनलाइन सूची बनाने की कोशिश की। आप इसे यहां पा सकते हैं: http://www.luukratief-design.nl/dump/parallax/para.html

किसी कारण से यह LI की चौड़ाई और ऊंचाई प्रदर्शित नहीं करता है। स्निपेट यहाँ है। इसमें गलत क्या है?

.navcontainer-top li { 
    font-family: "Verdana", sans-serif; 
    margin: 0; 
    padding: 0; 
    font-size: 1em; 
    text-align: center; 
    display: inline; 
    list-style-type: none;<br> 
    width: 117px; 
    height: 26px; 
} 


.navcontainer-top li a { 
    background: url("../images/nav-button.png") no-repeat; 
    color: #FFFFFF; 
    text-decoration: none; 
    width: 117px; 
    height: 26px; 
    margin-left: 2px; 
    margin-right: 2px; 
} 
.navcontainer-top li a:hover { 
    background: url("../images/nav-button-hover.png") no-repeat; 
    color: #dedede; 
} 

Answer 1

display: inline-block रूप a तत्व घोषित और li तत्व से चौड़ाई और ऊंचाई छोड़ देते हैं।

वैकल्पिक रूप से, एक float: leftli तत्व पर लागू और a तत्व पर display: block का उपयोग करें। यह थोड़ा और क्रॉस ब्राउज़र संगत है, उदाहरण के लिए display: inline-block फ़ायरफ़ॉक्स < = 2 में समर्थित नहीं है।

पहली विधि आपको गतिशील रूप से केंद्रित सूची की अनुमति देती है यदि आप ul तत्व 100% की चौड़ाई (ताकि यह बाएं से दाएं किनारे तक फैलती हो) और फिर text-align: center लागू करें।

तत्व के अंदर पाठ की वाई-स्थिति को नियंत्रित करने के लिए line-height का उपयोग करें।

Answer 2

मुझे लगता है कि समस्या यह है कि आप चौड़ाई को एक इनलाइन तत्व में सेट करने की कोशिश कर रहे हैं जो मुझे यकीन नहीं है। सामान्य ली में ब्लॉक है और यह काम करेगा।

Answer 3

इनलाइन तत्वों पर चौड़ाई/ऊंचाई का उपयोग करना हमेशा एक अच्छा विचार नहीं है। आप display: inline-block के बजाय

Answer 4

इनलाइन आइटमों की चौड़ाई नहीं हो सकती है। आपको display: block या display:inline-block का उपयोग करना होगा, लेकिन बाद वाला हर जगह समर्थित नहीं है।

Answer 5

.navcontainer-top li शैलियों से <br> हटाएं।

Answer 6

मुझे पृष्ठभूमि छवि चौड़ाई फिट करने के लिए आइटम आकार को ठीक करने का प्रयास करने का एक ही समस्या थी। यह मेरे लिए (कम से कम फ़ायरफ़ॉक्स 35 के साथ) काम करता है:

.navcontainer-top li 
{ 
    display: inline-block; 
    background: url("../images/nav-button.png") no-repeat; 
    width: 117px; 
    height: 26px; 
}