मेरे पास एक निश्चित चौड़ाई वाली डीआईवी है जिसमें कई स्तंभ हैं, और उपयोगकर्ता को DIV के भीतर क्षैतिज रूप से तालिका को स्क्रॉल करने की अनुमति देने की आवश्यकता है।क्षैतिज स्क्रॉलिंग के साथ div केवल
इसे केवल आईई 6 और आईई 7 (आंतरिक क्लाइंट एप्लिकेशन) पर काम करने की आवश्यकता है।
IE7 में निम्नलिखित काम करता है:
overflow-x: scroll;
किसी को भी एक समाधान है कि रूप में अच्छी तरह IE6 में काम करता है के साथ मदद कर सकते हैं?
समाधान काफी सीधे है। यह सुनिश्चित करने के लिए कि हम तालिका में सेल्स की चौड़ाई को प्रभावित नहीं करते हैं, हम सफेद-स्थान बंद कर देंगे। यह सुनिश्चित करने के लिए कि हम एक क्षैतिज स्क्रॉल बार प्राप्त करें, हम ओवरफ़्लो-एक्स चालू करेंगे। और वह काफी यह है:
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
आप the end-result here देख सकते हैं, या नीचे दिए गए एनीमेशन में। यदि तालिका आपके कंटेनर की ऊंचाई निर्धारित करती है, तो आपको overflow-y से hidden पर स्पष्ट रूप से सेट करने की आवश्यकता नहीं है। लेकिन समझें कि यह भी एक विकल्प है।
मुझे 'व्हाइट-स्पेस: नाइट्रैप' गायब था। एक जादू की तरह काम करता है! – AndreFeijo
यदि कोई तस्वीर हजारों शब्दों के लायक है, तो एक gif एक लाख के बराबर है। – HoldOffHunger
overflow-x: scroll;
overflow-y: hidden;
संपादित करें:
यह मेरे लिए काम करता है:
<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
<div style='width:400px;height:250px'></div>
</div>
मैं चयनित जवाब काम नहीं मिल सकता है, लेकिन research का एक सा के बाद, मुझे लगता है कि पाया क्षैतिज स्क्रॉलिंग div में सीएसएस में white-space: nowrap होना चाहिए।
यहाँ पूरा काम कर कोड है:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 1000px;
height: 190px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap
}
img{
width: 300px;
height: 150px;
margin: 20px 10px;
display: inline;
}
</style>
</head>
<body>
<div id='scrolly'>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
</div>
</body>
</html>
यहां सबसे अच्छा जवाब 'व्हाइट-स्पेस: अब्रैप' धन्यवाद! – oak
यहां "सफेद-स्थान: अब्रैप" का सुझाव सही उत्तर में मिश्रित किया गया प्रतीत होता है। स्वीकृत उत्तर में सुधार के लिए +1। – HoldOffHunger
मन में इन दोनों के गुण रखें:
overflow-x:scroll;
white-space: nowrap;
काम कर लिंक देखें: click me
एचटीएमएल
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
सीएसएस
div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
अतिप्रवाह-एक्स संपत्ति आईई 6 में ठीक काम करना चाहिए; आपके पास जटिल कारक हो सकते हैं। क्या आप एक परीक्षण केस पोस्ट कर सकते हैं जो समस्या को प्रदर्शित करता है? –
ऐसा लगता है कि मेरी समस्या कहीं और है - मेरा युक्त डीआईवी इसके कंटेनर में बह रहा है। –