उल

Question

के लिए क्षैतिज स्क्रॉलबार किसी कारण से, मैं यूएल और इसकी एलआई को लपेटने से नहीं रोक सकता। मैं चाहता हूं कि यूएल की चौड़ाई वास्तव में एलआई की चौड़ाई (रैपिंग के बिना) की चौड़ाई हो और यदि यूएल एनवी-डीवी (800 पीएक्स) से बड़ा हो, तो मुझे नौसेना के भीतर स्क्रॉलबार चाहिए ताकि मैं LI को स्क्रॉल कर सकूं।

मैंने डिस्प्ले, व्हाइटस्पेस, चौड़ाई और ऊंचाई के साथ बहुत कुछ करने की कोशिश की, लेकिन अगर मैं यूएल को एक निश्चित चौड़ाई देता हूं तो मैं इसे केवल काम पर ला सकता हूं। हालांकि, यह एक विकल्प नहीं है, क्योंकि पृष्ठ उत्पन्न होता है और इसमें 1-20 एलआई हो सकती है।

क्या कोई जानता है कि यूएल की चौड़ाई को सेट किए बिना स्क्रॉलबार कैसे बनाया जाए?

HTML:

<div id="nav"> 
    <ul id="navbuttons"> 
      <li>Some text</li> 
      <li>Some text</li> 
      ... 
    </ul> 
</div> 

सीएसएस:

div#nav 
{ 
    height: 100px; 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#nav ul li 
{ 
    margin-right: 15px; 
    float: left; 
    font-size: 12px; 
    list-style-type: none; 
} 

Answer 1

कोशिश इस

ul { 
    white-space:nowrap; 
} 

li { 
    display:inline; 
} 

Answer 2

<ul>inherit करने के लिए आप overflow property उपयोग कर सकते हैं तत्व की अतिप्रवाह व्यवहार स्थापित करने के लिए पर width की स्थापना करके। मूल्य scroll के साथ, तत्व के सारी सामग्री को स्क्रॉल करेगा अगर ऊंचाई सामग्री की चौड़ाई बॉक्स से कि अतिप्रवाह (दोनों x और y दिशाओं में):

div#nav ul 
{ 
    overflow: scroll; 
    width: inherit; 
    height: inherit; 
} 

Answer 3

चेतावनी: Untested

चाहेंगे आप न सिर्फ ली आइटम

div#nav ul li {  
    margin-right: 15px;  
    float: left;  
    font-size: 12px;  
    list-style-type: none; 
    width: 100px; 
} 

के लिए एक चौड़ाई सेट करना चाहते हैं और फिर एक निश्चित चौड़ाई और यूएल पर अतिप्रवाह के लिए चौड़ाई सेट स्क्रॉल करने के लिए?

div#nav ul { 
    width: 800px; 
    overflow: scroll; 
} 

इससे आपको एलएल स्क्रॉल करने का कारण होगा जब आपकी ली पिछले 8 कहती है, क्या आप इसके बाद क्या कर रहे हैं?

Answer 4

आप बच्चों के लिए आवरण के लिए display: inline-block; white-space: nowrap; और display: inline या display: inline-block उपयोग कर सकते हैं।

इसलिए, यह इस तरह दिखेगा: http://jsfiddle.net/kizu/98cFj/

और, यदि आप IE inline-block उस में रों सक्षम करने के लिए सशर्त टिप्पणी में इस हैक जोड़ने का समर्थन करना होगा:

.navbuttons, 
.navbuttons LI { 
    display: inline; 
    zoom: 1; 
} 

Answer 5

निम्नलिखित जोड़े नियम:

div#nav ul { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    white-space: nowrap; 
}