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

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处于同一级别),而是将其向下推出视图.

actionPanel的宽度在javascript中变得更大,因此两个元素的总宽度大于父元素的宽度.

有谁知道我怎么能达到我之后的效果？我试过使用浮动元素,但结果相同.我也尝试使用表元素,没有效果.

先感谢您.

Answer 1

white-space: nowrap在这种情况下,添加到内联块元素的容器中.row.

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