宽度等于内容

  • Z时代
  • 2024-01-10
  • 分类：问答

我在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>

回答：

默认情况下，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>

以上是 宽度等于内容 的全部内容， 来源链接： utcz.com/qa/416328.html

回到顶部