如何使容器 标记的宽度与其包含的 宽度匹配？答案

【问题标题】：How do I make the width of a container tag match the width of the it contains?如何使容器 标记的宽度与其包含的 宽度匹配？
【发布时间】：2023-03-25 23:26:01
【问题描述】：

我有一个包含跨度的段落。  标签的宽度比它包含的  宽得多，但我希望它只和它的子标签  一样大。

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

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

【问题讨论】：

span 如何知道何时换行？
stackoverflow.com/questions/5367056/…stackoverflow.com/questions/15102480/…stackoverflow.com/questions/12747045/…

标签： html css

【解决方案1】：

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

p{
    display:inline-block;
}

Js Fiddle Example

【讨论】：

【解决方案2】：

问题是 span 是内联元素。所以他的大小不能固定，你也不能直接知道。

 是一个块。所以他有一个大小，默认情况下是 100%。

所以，你可以给一个内联样式

display: inline;

或者如果你想保持格挡优势：

display: inline-block;

【讨论】：

【解决方案3】：

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

DEMO

CSS

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

【讨论】：