Question

此处有人建议我使用display:inline-block使元素的宽度与其内容相同。所以我尝试了，但是这样做了，我最终得到了所有混合的文本。我该如何解决这个问题？

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

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

Answer 1

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

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

＆＃13;

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

＆＃13;

Answer 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>

更多信息：Make flex container take width of content, not width 100%

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

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>

更多信息：Make flex items take content width, not width of parent container

Answer 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。

内联块的意外行为

3 个答案: