सीएसएस डिवी तत्व - केवल क्षैतिज स्क्रॉल बार कैसे दिखाना है?

Question

मैं एक div कंटेनर है और इस प्रकार अपनी शैली को परिभाषित किया है:

div#tbl-container 
{ 
    width: 600px; 
    overflow: auto;  
    scrollbar-base-color:#ffeaff 
} 

यह मैं दोनों क्षैतिज और ऊर्ध्वाधर स्क्रॉल बार स्वचालित रूप से देता है एक बार मैं अपने टेबल जो इस div के अंतर्गत होता है पॉप्युलेट। मैं केवल स्वचालित रूप से प्रकट होने के लिए केवल क्षैतिज स्क्रॉल बार चाहता हूं। मैं प्रोग्राम की तालिका की ऊंचाई को संशोधित कर दूंगा।

मैं यह कैसे कर सकता हूं?

Answer 1

आपको क्षैतिज और ऊर्ध्वाधर स्क्रॉलबार नहीं मिलना चाहिए जबतक कि आप उन्हें आवश्यक सामग्री के लिए पर्याप्त मात्रा में नहीं बनाते।

हालांकि आप आमतौर पर एक बग के कारण आईई में करते हैं। अन्य ब्राउज़रों (फ़ायरफ़ॉक्स इत्यादि) में यह पता लगाने के लिए जांचें कि वास्तव में यह केवल आईई है जो इसे कर रहा है।

overflow: auto; 
overflow-y: hidden; 

तुम भी IE8 के लिए जोड़ने की जरूरत हो सकता है::

IE6-7 (अन्य ब्राउज़रों के बीच) स्क्रॉलबार स्वतंत्र रूप से स्थापित करने के लिए है, जो आप खड़ी स्क्रॉलबार को दबाने के लिए इस्तेमाल कर सकते हैं प्रस्तावित CSS3 के विस्तार का समर्थन करता है

-ms-overflow-y: hidden; 

क्योंकि माइक्रोसॉफ्ट सभी पूर्व-सीआर-मानक गुणों को आईई 8 मानक मोड में अपने '-एम' बॉक्स में स्थानांतरित करने की धमकी दे रहा है। (अगर वे हमेशा ऐसा करते हैं तो यह समझ में आता है, लेकिन अब हर किसी के लिए असुविधा है।)

दूसरी ओर यह पूरी तरह से संभव है IE8 वैसे भी बग तय कर देगा।

Answer 2

CSS3 में overflow-x संपत्ति है, लेकिन मुझे इसके लिए बहुत अच्छा समर्थन नहीं मिलेगा। सीएसएस 2 आप जो भी कर सकते हैं वह सामान्य scroll नीति सेट करें और अपने widths और heights को गड़बड़ न करें।

Answer 3

आप भी यह overflow: auto कर सकते हैं और एक अधिकतम निश्चित ऊंचाई देने के लिए और इस तरह से चौड़ाई, जब पाठ या जो कुछ भी वहाँ में है, overflows यह केवल आवश्यक स्क्रॉलबार

Answer 4

दिखाने के लिए दोनों दिखाएंगे:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">  </div> 

छिपाएं X अक्ष:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">  </div> 

छिपाएं वाई अक्ष:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">  </div> 

Answer 5

मुझे शैली में white-space: nowrap; भी जोड़ना पड़ा, अन्यथा तत्व इस क्षेत्र में लपेट जाएंगे कि हम स्क्रॉल करने की क्षमता को हटा रहे हैं।

Answer 6

हमें overflow: auto पर सेट करना चाहिए और एक स्क्रॉलबार को छिपाना चाहिए जिसे हम असमर्थित CSS3 ब्राउज़र पर काम करने के लिए उपयोग नहीं करते हैं।इस CSS Overflow; XME.im

Answer 7

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;} 


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;} 
.box-author-txt ul li{ list-style-type:none; width:140px; } 

Answer 8

उपयोग पर देखो निम्नलिखित

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;"> 
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" > 

Answer 9

यह समाधान पिता div के लिए ऊंचाई/चौड़ाई विनिर्देश तो यह उत्तरदायी खिड़की का आकार बदलने और सबसे उपयोगी कारण करने के लिए किया जाएगा के बिना है यदि आवश्यक हो तो क्षैतिज स्क्रॉलबार दिखाई देता है।

.container{ 
    padding:20px; 
    border:dotted 1px; 
    white-space:nowrap; 
    overflow-x:auto; 
} 

.box{ 
    width:100px; 
    height:180px; 
    background-color: red; 
    margin:10px; 
    display:inline-block 
} 

DEMO

Answer 10

पर एक नजर डालें मैं सीएसएस गुण का उपयोग करें: 1) "overflow-x: auto"; 2) "overflow-y: hidden"; 3) "white-space: nowrap";

कंटेनर और आंतरिक DIVS घटकों दोनों के लिए चौड़ाई सेट करना न भूलें। संपत्ति "सफेद-स्थान: अब्रैप" आंतरिक डीवीवी को एक अलग रेखा पर नहीं छोड़ने की अनुमति देता है।

<div class="container"> 
    <div class="inner-1"></div> 
    <div class="inner-2"></div> 
    <div class="inner-3"></div> 
</div> 

मैं निम्नलिखित सीएसएस का उपयोग केवल एक क्षैतिज स्क्रॉल करने के लिए:

निम्न HTML को ध्यान में रखते

.container { 
    height: 80px; 
    width: 600px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 
.inner-1,.inner-2,.inner-3 { 
    height: 60px; 
    max-width: 250px; 
display: inline-block; /* this should fix it */ 
} 

फिडल: https://jsfiddle.net/qrjh93x8/ (ऊपर कोड के साथ काम नहीं कर रहा)