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

【问题标题】：Inline-block elements within a fixed width container with overflow:hidden get pushed down具有溢出的固定宽度容器内的内联块元素：隐藏被下推
【发布时间】：2013-08-02 14:43:44
【问题描述】：

在这里看我的小提琴：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 的宽度变大，以便两个元素的总宽度大于父元素的宽度。

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

提前谢谢你。

【问题讨论】：

标签： css css-float positioning

【解决方案1】：

将white-space: nowrap 添加到内联块元素的容器中，在本例中为.row。

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

【讨论】：

【解决方案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;
}

【讨论】：