CSS 填充方框的背景文字

Question

我正在尝试复制一个网站作为我的第一个 CSS/HTML 练习。我不知道如何制作菜单列表，以便它的背景填充框（延伸到右边框）。

Picture 我现在拥有的（图片右侧，红线表示背景应该去的地方）和我想要得到的（左侧）。

我的code。

到目前为止我已经尝试过实现它，例如使用 'width' 和 'display' 参数，但例如display: block; 删除文本之间的线条。我没主意了。

Answer 1

        display: block;
        width: 100%;
        margin-bottom: 2px;

到#menu

Answer 2

spans 是行内元素，因此它们不能有 width 或 height。您应该在 li 元素中放置 background-color 而不是 spans.

.menu{
   background-color: grey; //Change it to your custom colour.
}

此外，您不能有多个具有相同 ID 的元素。您必须将它们作为 class.

CSS background text filling the box