当我在链接周围悬停时，我基本上希望列表项漂亮的白色背景接触到导航栏的顶部和底部，这对于所有意图和目的来说都是非常重要的。 我实际上尝试了填充链接，但我仍然不能肯定地解决这个问题，这表明我出于所有意图和目的，希望列表项的白色背景在我通常在链接周围悬停时，触摸到导航栏的顶部和底部，或者他们特别这么认为。 你们能帮我一把吗？这特别重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.brand-title {
font-size: 1.5rem;
color: #eee;
}
.navbar {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
align-items: center;
padding: 10px;
}
header {
background-color: #333;
}
.navbar-links {
display: flex;
}
.navbar-links a{
color: orangered;
text-decoration: none;
display: block;
padding: .5rem;
}
.navbar-links li {
list-style-type: none;
justify-content: space-between;
margin-left: 10px;
}
.navbar-links li:hover {
background-color: white;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Navbar</div>
<ul class="navbar-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.brand-title {
font-size: 1.5rem;
color: #eee;
height: 100%;
display: flex;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
align-items: center;
height: 80px;
}
header {
background-color: #333;
}
.navbar-links {
display: flex;
height: 100%;
align-items: center;
}
.navbar-links a{
color: orangered;
text-decoration: none;
display: block;
padding: .5rem;
}
.navbar-links li {
list-style-type: none;
justify-content: space-between;
margin-left: 10px;`enter code here`
}
.navbar-links li:hover {
display: flex;
background-color: white;
height: 100%;
align-items: center;
}
你可以试试这个。 我修改了你的一些代码。 如果你有什么不清楚的地方，请告诉我。
从.navbar类中删除填充:10px并将其添加到.navbar-links li中
.navbar-links li {
list-style-type: none;
justify-content: space-between;
margin-left: 10px;
padding:10px;
}
.navbar {
display: flex;
justify-content: space-between;
width: 80%;
margin: auto;
align-items: center;
}
我想你要找的就是盒影。 如果你改变
.navbar-links li:hover {
background-color: white;
}
至
.navbar-links li:hover {
background-color: white;
box-shadow: 0 10px white;
}
我想你会得到你追求的结果。
