yếu tố Inline-block trong một container chiều rộng cố định với overflow: hidden bị đẩy xuống

Question

Xem fiddle tôi ở đây: 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; 
} 

tôi muốn "trượt" bảng kết quả sang bên phải (vì vậy nó vẫn ở cùng cấp với actionPanel), nhưng thay vào đó nó bị đẩy ra khỏi tầm nhìn.

Chiều rộng của hành độngPanel đang được tạo thành lớn hơn trong javascript sao cho tổng chiều rộng của hai phần tử lớn hơn chiều rộng của phần tử gốc.

Có ai biết cách tôi có thể đạt được hiệu quả tôi đang theo dõi không? Tôi đã cố gắng sử dụng các yếu tố nổi, nhưng điều đó có cùng kết quả. Tôi cũng đã cố gắng sử dụng một phần tử bảng, không có hiệu lực.

Cảm ơn bạn trước.

Answer 1

Thêm white-space: nowrap vào vùng chứa của các phần tử chặn nội tuyến, trong trường hợp này là .row.

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

Answer 2

Thay đổi 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; 
}