如何使同级内联级元素位于单独的行框中?

How could I make sibling inline-level elements be in separate line boxes?

提问人:gus 提问时间:5/26/2023 最后编辑:gus 更新时间:5/26/2023 访问量:60

问:

<div>
  <em style="background-color: aqua;">
      Line box 1
  </em>
  <span id="span2" style="background-color: aquamarine;">
      another sibling (line box 2)
  </span>
</div>

  1. 同级元素是否始终彼此相邻放置?inline-level

我本来以为会在另一个行框里。#span2

  1. 如何使 2 个同级内联级元素位于单独的行框中?

如果你能给我这个行为的规范,那就太好了。

html css

评论

1赞 j08691 5/26/2023
“我以为 #span2 会在另一个线箱里。”为什么?
0赞 Alohci 5/26/2023
有关规则,请参阅 CSS 内联布局模块级别 3 规范,尤其是问题 2,请参阅 CSS 文本模块级别 3 规范,第 5 节。换行和单词边界
0赞 gus 5/26/2023
嗨,@Alohci,另一个问题,它在哪里说内联框与其父内联框位于同一行框上?例如<span>line box 1<span>span in the same line box</span></span>
1赞 Alohci 5/29/2023
好吧,它没有,因为它不是真的。我们只能说,对于纯内联框,内联框的片段将分布在其父内联框的片段分布的行框的子集上。
1赞 Alohci 5/30/2023
@gus。是的。与内联级盒子相反,后者的情况要复杂得多

答:

-1赞 Franck Perrin 5/26/2023 #1

不确定我是否完全理解你想要什么。试试这个:

CSS的

.my-class > * {
  display: block;
}

[HTML全

<div class="my-class">
  <em style="background-color: aqua;">
      Line box 1
  </em>
  <span id="span2" style="background-color: aquamarine;">
      another sibling (line box 2)
  </span>
</div>

评论

0赞 gus 5/26/2023
@Frank Perrin,是的,但是,我想了解行为,而不是解决方案本身。
0赞 Franck Perrin 5/26/2023
像“em”或“span”这样的内联元素具有“display: inline;”默认样式,这导致它们以“内联”方式显示。所以我给他们起了“display: block;”的样式。我的做法是选择具有“my-class”类(此处为“div”)的元素的所有直接子项('> *' css selector)。希望这很清楚..