如何在 CSS 中自动设置段落宽度？

Question

这是交易。我不想只是在我的段落下划线并使用 text-align ，而是想在下方添加一个虚线边框并将其居中放置在该段落的父 div 中。这是我的代码不起作用。 （它在整个 div 而不仅仅是段落中添加了边框）

 p {
  border-bottom:1px dotted;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

该段落似乎占据了父 div 的宽度。有没有办法将段落的宽度设置为其包含的文本？ （似乎 margin:auto 如果可能的话会起作用。）

原文由 user2020058 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

段落将扩展到其容器的宽度。为了让它不这样做，你可以尝试：

 p { display: inline-block; }

摆弄例子：http: //jsfiddle.net/HuFZL/1/

此外，您可能希望将 p 标签包装在附加的 div 中，如果您需要它们来清除其他段落/元素。

原文由 SlightlyCuban 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想让段落不断地相互堆叠并从他们的内容中成长，你应该需要的是：

 p {
      display: table;
      margin:auto;
      border-bottom:1px dotted;
}

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 3.0 许可协议