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

Question

标题可能有点令人困惑。

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

例如：

应该如何：

此外，我需要元素紧密结合，内联元素样式，如第一个示例所示。我在display:inline标记上查看了display:inline-block和div;然而，这导致div的行为与第一个示例相同（元素不会填充其所有水平空间，从悬停效果中可见）。例如：

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

另一方面，使用span具有相反的效果，导致第二个例子问题。例如：

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

有没有办法两者？即是否有任何类型的元素或CSS技巧与类似内联元素的垂直填充和类似块元素的水平填充？

Answer 1

您可以遵循以下内容：

<强> 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