我遇到一些CSS的宽度属性的麻烦。我有一些div里面的段落。我想设置段落的宽度等于其内容，以便它们的绿色背景看起来像文本的标签。我所得到的是，段落继承了更宽的div父节点的宽度。我应该做什么？
谢谢。
谢谢。
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标签是块元素，这意味着它们占据父宽度的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寻求解决方案，但希望将每个项目保留在一行中，则可以添加< br>每个标签之后：
<div id="container"> <p>Sample Text 1</p><br/> <p>Sample Text 2</p><br/> <p>Sample Text 3</p><br/> </div>
