Html 内联块的意外行为

这里有人建议我使用

display:inline block

使元素的宽度与其内容相同。所以我试过了，但这样做，我的文字变得混乱。我该如何解决这个问题

第二对是我想要的，但段落的宽度仅作为内容延伸

inline block p
正常范围
正常p
正常span

你的标题说意外行为，但这是正常行为。您使元素的行为类似于内联元素，因此不再有换行符，因此您将具有这种行为

如果希望

p

仅具有其内容的宽度，并使换行符仅将其包装在div（块元素）中：

内联块p

正常span

您已将元素设置为

内联块

，这使它们成为内联级别，并将它们放置在同一行上

这里有一个替代方案：使用内联级别的flex容器，如下所示：

正文{
显示：内联flex；
弯曲方向：立柱；
}
正文>*{
边框：1px红色虚线；
}

内联块p

正常跨度
正态p

正常span

使span显示=块

HTML:

---

这是一个。

第二对是我想要的

那么？你有你想要的。。为什么你想要宽度来扩展内容和换行？只需保留默认行为保留内联标记，并在您希望文本中断的位置添加一个

标记，虽然也是关于flex的，但唯一的问题是它将中断相邻跨距的行为[但不确定OP是否需要此]@TemaniAfif，在您的答案和我的答案之间，其中一个应该对他有用：-）是的，当然，但我只是想知道我们是否可以只改变p元素的行为，但我想不是因为所有的孩子都是弹性物品，行为都是一样的…@TemaniAfif，如果没有OP中的更多细节，我们就无法更精确了。

<div id=container>
   <p>Hello, world!</p><span>Here is my span</span>
</div>

* {
   margin: 5px;
   padding: 5px;
}
div {
   background: gray;
}
p {
   background:white;
   border-bottom: 1px dotted black;
   display: inline-block;
}
span {
  display: block;
}