位置内的非包装内容：具有可变宽度的绝对容器

Question

我在div中放置了一些div和按钮，位于div中，其位置为：absolute，如此jsfiddle

代码：

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

其中：

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

有关完整内容，请参阅jsfiddle。

我的问题是我是否使用display：float-left的inline-block为div .button-line的子元素，包裹内的按钮，我不希望这样。我希望.button-line div的宽度适应它的内容大小，以及同一行上的所有按钮。

感谢。

Answer 1

尝试添加：

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

<强> jsFiddle example

Answer 2

这是你需要的关键吗？ Fiddle me this

基本上操作的内容是用

完成的

white-space:nowrap;

我已经取消了你所有的造型，所以你可以更清楚地看到发生了什么。