CSS：设置宽度等于内容

我遇到了CSS的宽度属性的一些麻烦。我在div里面有一些段落。我想设置段落的宽度等于他们的内容，以便他们的绿色背景看起来像文本的标签。我得到的是，段落inheritancediv父节点的宽度更宽。我应该做什么？谢谢。

HTML：

<div id="container"> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>Sample Text 3</p> </div>

CSS：

 #container { width: 30%; background-color: grey; } #container p{ background-color: green; }

默认情况下， p标签是block元素，这意味着它们占据父width 100％。

您可以更改他们的显示属性：

 #container p { display:inline-block; }

但它把元素并排放置。

要保持每个元素在自己的行上，你可以使用：

 #container p { clear:both; float:left; }

_{（如果你使用float并且需要在浮动元素之后清除，请参阅这个链接以获取不同的技巧： http : //css-tricks.com/all-about-floats/ ）}

演示： http : //jsfiddle.net/CvJ3W/5/

编辑

如果你使用display:inline-block解决scheme，但是想把每个项目保存在一行中，你可以在每个项目之后添加一个<br>标签：

 <div id="container"> <p>Sample Text 1</p><br/> <p>Sample Text 2</p><br/> <p>Sample Text 3</p><br/> </div>

新的演示： http : //jsfiddle.net/CvJ3W/7/

我把宽度设置为最大内容，它为我工作。

width: max-content;

添加display: inline-block; 到p造型应该采取的：

 #container p{ background-color: green; display: inline-block; }

设置display:inline-block ，然后调整您的利润率。

小提琴： http : //jsfiddle.net/Q2MrC/

inline-block的解决scheme迫使您在每个元素之后插入<br> 。
带有float的解决scheme迫使你用“clearfix”div来包装所有的元素。

另一个优雅的解决scheme是使用display: table来display: table元素。

有了这个解决scheme，你不需要手动插入换行符（就像使用inline-block ），你不需要在你的元素周围包装（如使用浮动），你可以在需要的时候居中放置元素。

你可以使用下面的任何一个：

1）显示：内嵌块：

取消注释该行

  float:left; clear:both

你会发现父容器已经崩溃了。

2）使用显示：表

尝试使用<span>元素。或者，如果您愿意，请尝试display:inline

尽pipe使用display: inline-block 。当div元素的宽度设置为父级的%时，我的div将填充屏幕宽度。如果其他人正在寻找这个解决scheme，并不介意使用屏幕比例，而不是父母的比例，用宽度（视口宽度）， vh或高度（视口高度） vhreplace% 。

将width属性设置为：width：fit-content

demo: http demo: //jsfiddle.net/rvrjp7/pyq3C/114