时间戳

首页 > 解决方案 > 导航元素的背景未填充整个空间

css - 导航元素的背景未填充整个空间

问题描述

StackOverflow 社区！

我的网站有问题，我将鼠标悬停在导航栏上的某个项目上，但它没有覆盖我打算覆盖的全部位置。对于那些敏锐地注意到这个问题也在此处和此处得到回答的版主，它不适用于我的情况，因为一个是跨度标签，另一个是垂直下拉菜单，而不是水平导航栏。下面附上问题的截图。

不按高度和宽度填充总空间 我打算的效果是让背景右到上下边缘，将背景推到左右边缘

我试过在网上到处玩，但最一致的答案是：

利用display: block

如果我要实现它，这会打乱导航栏的流程。有人可以指出我正确的方向吗？

CSS 用于设置导航栏及其元素的样式：

nav {
    text-align: center;
    background-color: black;
}

nav ul {
    list-style-type: none;
    padding: 10px;
}

nav li {
    display: inline-block;
    transition: background-color 0.3s ease-in-out 0s;
}

nav li:hover {
    background-color: lightgrey;
}

nav a {
    text-decoration: none;
    color: white;
}

注意：问题在于我为ul元素添加了一些填充，我明白这一点。我只是不确定如何在不拧导航栏的情况下绕过它

标签： cssnavigation

解决方案

只需将填充放在上面li即可。

nav {
    text-align: center;
    background-color: black;
}

nav ul {
    list-style-type: none;
}

nav li {
    display: inline-block;
    transition: background-color 0.3s ease-in-out 0s;
    padding: 10px;
}

nav li:hover {
    background-color: lightgrey;
}

nav a {
    text-decoration: none;
    color: white;
}
<nav>
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
  </ul>
</nav>

推荐阅读