Html 如何将span与h2放在同一条线上？

我试着将文本编号（span）放在一行中条目标题（h2）的旁边，然后下一行是下一行中的条目元块，如下图所示，读取时间向左浮动。我需要CSS的支持

谢谢

例：

我当前的HTML标记

TOGAF–企业架构框架
3.
2019年7月31日
化身图像
abc

有效的html和flex可以成为您最好的朋友

标题，
标题div{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：之间的空间；
宽度：600px；
保证金：自动；
}
.署名{
顺序：-1；
右边距：0；
}
标题div：之前{
内容：''；
左边框：实心2px；
保证金：自动1em；
垫面：1米；
}
.张贴于{
左边距：0；
右边距：自动；
}

TOGAF–企业架构框架
三,

2019年7月31日
abc

它不在同一行的原因是因为h2是块元素，这意味着它将占据父元素的全部宽度

使用display:flex肯定会起作用，但是了解为什么会发生这种情况非常重要

另一方面，跨度元素是内联元素。这意味着，它将占据值的宽度和高度，而不是其父值的全宽度

您可以简单地将h2的显示类型更改为内联块，而不是使用flex

内联块允许元素占据其值的宽度和高度，但也可以调整宽度和高度

这里有一个很好的解释：

编辑： 更改元素的显示类型比将父元素的显示更改为flex要好得多

---

它的开销要小得多，而且是一种直接的本地解决方案。

为什么不将跨度放在h2中？使用有效的html。要测试html是否正常，可以使用。第一步是删除WordPress中当前页面模板的预标记包装头。我不确定是否要触摸它，只想使用CSS来解决这个问题。我想你可以编辑模板，将span和icone包装成一个p标记，并删除预标记。我更改p标记包装span就像你说的那样是一个技巧。它就像一个没有编辑模板的魅力。谢谢，G-Cyr。投票赞成你的解决方案！谢谢，G-Cyr。它就像一个符咒。我们只是添加了更多的p标签，这是一个将评论数量与标题内联的技巧。在那之前我试过flex box，但它不起作用。

TOGAF – Enterprise Architecture Framework 3 icon-comment
Avartar-image | abc July 31, 2019            3 mins read 

h2{
display: inline-block;
}