css - Non-wrapping content inside a position: absolute container with variable width

Question

I have some divs and buttons inside a div placed in a div with position: absolute, as in this jsfiddle

The code:

<div class="buttons">
    <div class="button-line">      
        <div>Edit</div>
        <div>Cancel</div>
        <input type="submit" class="wd-edit" value="Submit">
    </div>
</div>

Where:

.buttons {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 100%;
}
.button-line > * {
    display: inline-block;
}

See the jsfiddle for complete content.

My problem is that whether I use display: inline-block of float-left for the childrens of the div .button-line, the buttons inside wrap, and I don't want that. I want the width of the .button-line div to adapt to the size of it's content, and all the buttons on the same line.

Thanks.

Answer 1

追加してみてください：

.button-line.b3 {
    white-space:nowrap;
}

jsFiddle の例

Answer 2

これはあなたが必要とするものの核心ですか？これをいじって

基本的に操作の要点は

white-space:nowrap;

何が起こっているのかをより明確に確認できるように、スタイリングをすべて外しました。