宽度等于内容

一尘不染

宽度等于内容

css

我在CSS的width属性上遇到了一些麻烦。我在div中有一些段落。我想使段落的宽度等于它们的内容，以使它们的绿色背景看起来像文本的标签。相反，我得到的是这些段落继承了div父节点的宽度，该宽度更宽。

#container {

  width: 30%;

  background-color: grey;

}



#container p {

  background-color: green;

}


<div id="container">

  <p>Sample Text 1</p>

  <p>Sample Text 2</p>

  <p>Sample Text 3</p>

</div>

阅读 474

2020-05-16

共1个答案

一尘不染

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

您可以使用以下方法更改其显示属性：

#container p {
   display:inline-block;
}

但这使元素并排。

要使每个元素保持独立行，可以使用：

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

（如果您使用float并需要在float元素之后清除，

编辑

如果您寻求解决方案，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>

2020-05-16