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

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: inline-block of float-left 作为 div .button-line 的子级，内部的按钮换行，我不希望这样。我希望 .button-line div 的宽度适应其内容的大小，以及同一行上的所有按钮。

谢谢。

Answer 1

尝试添加：

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

jsFiddle 示例

Answer 2

这是你需要的关键吗？摆弄我这个

基本上手术的内容是用

white-space:nowrap;

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