2011-05-08 18 views
8

मेरे पास एक div है जो कई अनियमित सूचियों (उल) को घेरता है। मेरे पास प्रत्येक उल सेट "फ्लोट: बाएं" है। और मेरे पास मूल div भी है जिसमें उन्हें "ओवरफ्लो-एक्स: स्क्रॉल" पर सेट किया गया है। क्या हो रहा है कि उल पृष्ठ के किनारे पर आते हैं और माता-पिता div की स्क्रॉलिंग संपत्ति का लाभ उठाने के लिए पक्ष में नहीं रहते हैं (स्क्रॉल बार वहां हैं)। क्यूं कर? मैं इसे कैसे ठीक करूं?एचटीएमएल, ओवरफ़्लो: स्क्रॉल, और फ्लोट

किसी भी मदद के लिए धन्यवाद।

उत्तर

6

आप आप देने के लिए जो कर देंगे चौड़ाई = [उल की चौड़ाई] * [ULS की संख्या]
http://jsfiddle.net/seler/gAGKh/ या गिनती ULS की कुल चौड़ाई, एक और div में उन ULS डालने की आवश्यकता http://jsfiddle.net/seler/gAGKh/1/

+1

एक आंतरिक div बनाना बहुत मदद करता है। उचित चौड़ाई की गणना करने के लिए जेएस का उपयोग करने के बजाय, मैंने पाया कि सबसे चरम मामले के लिए नए आंतरिक div की स्थिर चौड़ाई को पर्याप्त रूप से बड़ी चौड़ाई में सेट करना लेआउट को कोई नुकसान नहीं पहुंचाता है। धन्यवाद Seler। – s2cuts

+0

@ s2cuts जो केवल तभी काम कर सकते हैं जब आपके पास निरंतर उल चौड़ाई और निरंतर उल संख्या हो। – seler

+1

गंदा जावास्क्रिप्ट फिक्स, डीडीएलशैक द्वारा वर्णित उत्तर एक क्लीनर समाधान है। – user1226868

4

क्योंकि आप ULS जारी, वे दस्तावेज़ में मौजूद नहीं है अब और प्रवाह तो वे माता पिता div का विस्तार नहीं होगा (इसलिए रैपिंग।)

माता पिता div कि अनुमति देता है पर एक स्पष्ट चौड़ाई सेट करने का प्रयास उन सभी के लिए एक तरफ मौजूद हैं।

ALSO, यदि आप पैरेंट div में यूएल को साफ़ नहीं कर रहे हैं तो आप वहां भी मुद्दों के साथ लंबवत हो सकते हैं। सुनिश्चित करें कि आप स्पष्ट अपने तैरता बनाओ :)

+0

स्पष्टीकरण मेरी क्वेरी का हिस्सा था, धन्यवाद। क्या आप यह भी समझा सकते हैं कि "क्या आप सुनिश्चित करते हैं कि आप अपनी फ्लोट साफ़ करते हैं"? – s2cuts

+0

@ s2cuts सुनिश्चित करें कि आप सामग्री के ऊपरी भाग में अपने मूल कंटेनर का विस्तार करने के लिए [clearfix] (http://www.webtoolkit.info/css-clearfix.html) जैसे कुछ का उपयोग करें। अन्यथा, आप क्षैतिज चौड़ाई वाले मुद्दों के समान ऊर्ध्वाधर ऊंचाई वाले मुद्दों में भाग लेंगे। बिलकुल चौकन्ना। – Tim

0

आप की जरूरत है:

  1. <li> भी नाव बनाओ।
  2. प्रत्येक <ul> पर निश्चित चौड़ाई निर्धारित करें।
  3. सभी सूचियों को पकड़ने के लिए पर्याप्त <div> में निश्चित चौड़ाई निर्धारित करें।

उदाहरण के लिए:

ul { width: 250px; } 
li { margin-left: 5px; } 
ul, li { float: left; } 
div { overflow-x: scroll; width: 750px; } 

Test case

6

आप अपनी सूची आइटम को प्रदर्शित करने के लिए सेट कर सकते हैं: इनलाइन-ब्लॉक, फिर सफेद-स्पेस का उपयोग करें: अब्रैप। अधिकांश आधुनिक ब्राउज़रों में काम करता है।

http://jsfiddle.net/gAGKh/22/

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