अतिप्रवाह के साथ एक निश्चित चौड़ाई कंटेनर के भीतर इनलाइन-ब्लॉक तत्वों: छिपे हुए नीचे धक्का दे दिया हो

Question

मेरी बेला यहाँ देखें: http://jsfiddle.net/Waterstraal/bMfbH/2/

HTML:

<div class="row"> 
    <div class="actionPanel"></div><div class="resultPanel"></div> 
</div> 

सीएसएस:

.row { 
    width:500px; 
    height: 50px; 
    overflow:hidden; 
    border:1px solid #ccc; 
} 
.resultPanel { 
    display:inline-block; 
    width:450px; 
    height: 50px; 
    background: #ddd; 
} 
.actionPanel { 
    display:inline-block; 
    width:50px; 
    height: 50px; 
    background:#eee; 
} 

मैं परिणाम पैनेल को दाईं ओर "स्लाइड" करना चाहते हैं (इसलिए यह अभी भी एक्शनपैनल के समान स्तर पर है), लेकिन इसके बजाय इसे देखने से बाहर धकेल दिया जाता है।

कार्रवाई की चौड़ाई जावास्क्रिप्ट में बड़ी हो रही है ताकि दोनों तत्वों की कुल चौड़ाई मूल तत्व की चौड़ाई से बड़ी हो।

क्या कोई जानता है कि मैं उसके बाद के प्रभाव को कैसे प्राप्त कर सकता हूं? मैंने फ़्लोटिंग तत्वों का उपयोग करने की कोशिश की है, लेकिन इसका एक ही परिणाम था। मैंने बिना किसी प्रभाव के टेबल तत्व का उपयोग करने का भी प्रयास किया।

अग्रिम धन्यवाद।

Answer 1

white-space: nowrap इनलाइन-ब्लॉक तत्वों के कंटेनर में जोड़ें, इस मामले में .row।

http://jsfiddle.net/thirtydot/bMfbH/3/

Answer 2

सीएसएस बदलें:

body { 
padding:10px; 
} 
.row { 
width:500px; 
height: 50px; 
overflow:hidden; 
border:1px solid #ccc; 
} 
.resultPanel { 
height: 50px; 
background: #ddd; 
} 
.actionPanel { 
float:left; 
width:50px; 
height: 50px; 
background:#eee; 
}