设置div的宽度，包含显示为表的元素以适合内容

Question

如何设置包含显示为表格的div元素的p的宽度以适合内容？ JsFiddle HTML：

<div>
    <p>
        <span>text1</span>
    </p>
    <p>
        <span>text2</span>
    </p>
<div>

CSS：

p {
    display:table;
    background-color:red;
}

span {
    display:table-cell;
    width: 100px;
}

div {
    background-color: green;
}

Answer 1

为div设置display:table也会调整宽度：

div {
    background-color: green;
    display:table;
}

编辑：正如评论中所指出的那样display:inline-block也将完成这项工作，具体取决于您希望此div的行为方式。

Answer 2

首先来自span的remove width attribute将inline-block提供给div

js fiddle

最终的css将是

p {
    display:table;
    background-color:red;
}

span {
    display:table-cell;
}

div {
    display:inline-block;
    background-color: green;
}

Answer 3

如果要收缩包装div内容，请将float:left添加到div：

div {
    background-color: green;
    float:left;
}

<强> jsFiddle example