क्षैतिज स्क्रॉल बार के साथ divs की एक पंक्ति बनाते हैं

Question

ठीक है तो मैंने सोचा कि मैंने इसे व्हाइट-स्पेस का उपयोग करके तय किया है: नो-रैप यह क्रोम में काम करता है लेकिन कुछ भी नहीं।

मैं कुछ इस तरह है:

<div class="outer"> 
    <ul> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg1.jpg" /></a> 
      <br /> 
      EG1 lorem ipsum 
      </div> 
     </li> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg2.jpg" /></a> 
      <br /> 
      EG2 lorem ipsum 
      </div> 
     </li> 
. 
. 
. 
//etc (multiple li's) 

</ul> 

</div> 

बहाना वास्तव में खराब छवि लेकिन इस efect im के लिए लक्ष्य है।

मैं 'आइटम' की एक पंक्ति चाहते हैं, तो वे अंतरिक्ष तो क्षैतिज स्क्रॉल सलाखों दिखाई देनी चाहिए से अधिक है।

उम्मीद है कि समझ में आता है, मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

लिखें के लिए नाव छोड़ स्थिति का उपयोग करें:

.outer{ 
    width:400px; 
    overflow:auto; 
    white-space:nowrap; 
} 
.outer li{ 
    display: inline-block; 
    *display: inline;/*For IE7*/ 
    *zoom:1;/*For IE7*/ 
    vertical-align:top; 
    width:40px; 
    margin-right:20px; 
    background:red; 
    white-space:normal; 
} 

चेक इस http://jsfiddle.net/ZrpHv/

Answer 2

अच्छी तरह से मुझे पता है कि हर अच्छा और शुद्ध वेब डेवलपर मुझसे नफरत करेगा (और जब मैं ऐसा कुछ पोस्ट करता हूं तो मुझे नफरत है) लेकिन आप बस ऐसा करने के लिए टेबल का उपयोग कर सकते हैं।

यह सभी ब्राउज़रों में चलता है। हां, यह मानक नहीं है, नहीं, यह सीएसएस नहीं है। लेकिन ... उत्पादकता मानक से कुछ बेहतर है।

आप अपने कंटेनर (उल) के लिए एक निश्चित div चौड़ाई भी इस्तेमाल कर सकते हैं। और अपने सभी बच्चों को इस तरह

Answer 3

आप अतिप्रवाह के साथ माता पिता div के अंदर एक बड़े पैमाने पर क्षैतिज div लगाने की जरूरत है: ऑटो; यह अगली पंक्ति में लपेटे बिना बाएं तैरने की अनुमति देगा, और यह केवल स्क्रॉल करेगा जब पैरेंट div की सीमा पार हो जाएगी।

Answer 4

आप 64px की तरह कुछ पूर्ण करने के लिए div.inner चौड़ाई निर्धारित करने की आवश्यकता है और या तो दाएँ या बाएँ अपने li रों नाव बनाने के लिए और फिर auto करने के लिए अपने माता-पिता div की overflow-x गुण सेट। यह fiddle