如何使容器<p>标签的宽度与其包含的<span>的宽度相匹配？</span> </p>

Question

我有一个包含跨度的段落。 <p>标记的宽度比它包含的<span>宽得多，但我希望它只与其子<span>一样大。

<p>
    <span>Some text.</span>
</p>

我尝试了width: auto，但这似乎不起作用。

Answer 1

将display:inline-block;与p元素一起使用。

p{
    display:inline-block;
}

Js Fiddle Example

Answer 2

问题是span是内联元素。所以他的体型无法修复，你无法直接了解它。

<p>是一个块。所以他有一个大小，默认是100％。

因此，您可以为<p>

提供内联样式

display: inline;

或者如果你想保持阻止优势：

display: inline-block;

Answer 3

除了inline之外的另一个解决方案是float元素

DEMO

<强> CSS

p {
    border:1px solid #000;
    float:left
}