内联块的意外行为答案

【问题标题】：Unexpected behavior with inline-block内联块的意外行为
【发布时间】：2018-07-08 17:46:06
【问题描述】：

这里有人推荐我使用display:inline-block 使元素的宽度与其内容相同。所以我尝试了，但这样做时，我最终把文本弄混了。我该如何解决这个问题？

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

<p style="display: inline-block">Inline-block P</p><span>Normal span</span>
<p>Normal P</p><span>Normal span</span>

【问题讨论】：

The second pair is what I wanted 所以？你有你想要的......为什么你想要宽度来扩展内容和换行符？只需保持默认行为
保留内联标签并在您希望文本中断的地方添加<br>标签

标签： html css

【解决方案1】：

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

如果您希望p 仅具有其内容的宽度并具有换行符，只需将其包装在 div（块元素）内：

<div>
  <p style="display: inline-block;background:red;">Inline-block P</p>
</div>
<span>Normal span</span>

【讨论】：

【解决方案2】：

您已将元素设置为 inline-block，这使它们成为内联级别，从而将它们放在同一行。

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

body {
  display: inline-flex;
  flex-direction: column;
}

body > * {
  border: 1px dashed red;
}

<p>Inline-block P</p>
<span>Normal span</span>
<p>Normal P</p>
<span>Normal span</span>

或使用块级弹性容器，但覆盖align-items 上的默认stretch 值：

body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body > * {
  border: 1px dashed red;
}

<p>Inline-block P</p>
<span>Normal span</span>
<p>Normal P</p>
<span>Normal span</span>

【讨论】：

我虽然也谈到了 flex，但唯一的问题是它会破坏彼此相邻的跨度的行为[但不确定 OP 是否想要这个]
@TemaniAfif，在你的回答和我的回答之间，其中一个应该对他有用:-)
是的，但我只是好奇我们是否可以只改变 p 元素的行为，但我想不是所有的孩子都会是弹性项目并且表现相同......
@TemaniAfif，如果没有来自 OP 的更多详细信息，我们将无法更准确。

【解决方案3】：

使您的跨度显示 = 块。

HTML：

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

CSS：

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

这是fiddle。

【讨论】：