Span-style 全宽元素间距

Question

标题可能有点混乱。

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

例如：

应该如何：

此外，我需要元素靠在一起，inline-element 样式，如第一个示例所示。我查看了 div 标签上的 display:inline 和 display:inline-block；然而，这导致 div 的行为与第一个示例中的行为相同（该元素未填充其所有水平 space，从悬停效果可见）。例如：

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

另一方面，使用 span 会产生相反的效果，导致 second-example-esque 问题。例如：

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

有什么方法可以做到两者吗？即是否有任何类型的元素或 CSS 技巧与 inline-element-like 垂直填充和 block-element-like 水平填充？

Answer 1

添加width: 100%

(Demo)

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

Answer 2

您可以按照以下内容进行操作：

CSS:

#nav{
    width: 33%;
    border: 2px dotted #000;
}
#nav ul{

    padding: 0px 0px 0px 0px;
}
#nav ul li {
   width: 100%;
    list-style: none;
    display: inline-block;

}
#nav ul li:hover{
    background-color: #ffccaa;
}
#nav ul li a{
    padding: 5px 0px 5px 10px;
    text-decoration: none;
}

HTML

<div id="nav">
    <ul>
        <li><a href="#">Example 1</a></li>
        <li><a href="#">Example 2</a></li>
    </ul>

</div>

检查这个DEMO

Span-style 全宽元素间距

Span-style spacing with full width element

html

css

padding