提问人:gus 提问时间:5/26/2023 最后编辑:gus 更新时间:5/26/2023 访问量:60
如何使同级内联级元素位于单独的行框中?
How could I make sibling inline-level elements be in separate line boxes?
问:
<div>
<em style="background-color: aqua;">
Line box 1
</em>
<span id="span2" style="background-color: aquamarine;">
another sibling (line box 2)
</span>
</div>
- 同级元素是否始终彼此相邻放置?
inline-level
我本来以为会在另一个行框里。#span2
- 如何使 2 个同级内联级元素位于单独的行框中?
如果你能给我这个行为的规范,那就太好了。
答:
-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)。希望这很清楚..
评论
<span>line box 1<span>span in the same line box</span></span>