css - 具有溢出的固定宽度容器内的内联块元素：隐藏被下推

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

我想将结果面板“滑动”到右侧（因此它仍然与 actionPanel 处于同一水平），但它却被推下视线之外。

在 javascript 中，actionPanel 的宽度变大了，因此两个元素的总宽度大于父元素的宽度。

有谁知道我怎样才能达到我想要的效果？我尝试使用浮动元素，但结果相同。我也尝试使用表格元素，但没有效果。

先感谢您。

Answer 1

添加white-space: nowrap到 inline-block 元素的容器中，在本例中为.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;
}