html - 具有全宽元素的跨度样式间距

Question

标题可能有点令人困惑。

我有一些元素的列表，每个元素都应用了 CSS 悬停效果(背景变亮)。但是，我希望每个元素都填满其容器中的所有空间，而目前它们并没有这样做。

例如:

它应该如何:

此外，我需要元素靠在一起，采用内联元素样式，如第一个示例所示。我研究了 div 标签上的 display:inline 和 display:inline-block；然而，这导致 div 的行为与第一个示例中的一样(该元素未填充其所有水平空间，从悬停效果可见)。例如:

<div style="display:inline-block">Example 1</div>

另一方面，使用 span 会产生相反的效果，导致类似第二个示例的问题。例如:

<span style="display:block">Example 1</span>

有什么方法可以两者吗？即是否有任何类型的元素或 CSS 技巧具有类似内联元素的垂直填充和类似 block 元素的水平填充？

Answer 1

添加宽度:100%

( Demo )

<span style="display: inline-block; width: 100%;">