html - 当 P 是相对的儿子时，将绝对父 P 拉伸(stretch)到其子宽度

Question

看这里: http://jsfiddle.net/QTrat/10/

我想将红色框拉伸(stretch)到 float 子项组合宽度。

意思应该是:

child child child

代替

child
child
child

我该怎么做？

只要布局保持不变，我不介意完全更改代码。

Answer 1

将其从 float 更改为display: inline-block，并给父white-space: nowrap:

.middle-parent{
    background-color: red;
    position: absolute;

    white-space: nowrap;                /* This */

    left: 0;            
}

.floated-child{
    display:inline-block;                     /* And this */

    background-color: beige;
    margin: 0 5px;
}

更新 fiddle :http://jsfiddle.net/sveinatle/QTrat/12/