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

【问题标题】：Non-wrapping content inside a position: absolute container with variable width位置内的非包装内容：具有可变宽度的绝对容器
【发布时间】：2013-05-20 19:31:49
【问题描述】：

我在一个 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 的宽度适应其内容的大小，以及同一行上的所有按钮。

谢谢。

【问题讨论】：

标签： css css-float

【解决方案1】：

尝试添加：

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

jsFiddle example

【讨论】：

【解决方案2】：

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

基本上操作的肉是用

完成的

white-space:nowrap;

我已经去掉了你所有的样式，这样你就可以更清楚地看到发生了什么。

【讨论】：