インラインブロック要素：隠されたgetが

Question

を押し下げここに私のバイオリンを参照してください：http://jsfiddle.net/Waterstraal/bMfbH/2/

HTML：

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

CSS：

.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; 
} 

をI resultpanelを右にスライドさせたい（actionPanelと同じレベルにあります）が、代わりにビューからはみ出してしまいます。

javascriptでactionPanelの幅を大きくして、2つの要素の合計幅が親要素の幅より大きくなるようにしています。

どのように私は後に効果を達成することができます知っていますか？浮動要素を使用しようとしましたが、同じ結果がありました。私はまた、テーブル要素を使用しようとしましたが効果はありません。

ありがとうございます。

Answer 1

white-space: nowrapをインラインブロック要素のコンテナに追加します（この場合は.row）。

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

Answer 2

変更CSS：

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; 
}