如何解决导航栏ul li hover背景无法铺满整个navbar的问题？

问题根源在于浏览器默认给<ul>标签添加了左内边距，导致列表项的背景被挤压无法铺满导航栏左侧；另外悬停时动态添加上下内边距会导致元素高度跳动，且<a>标签未占满列表项空间。

修改后的代码如下：

CSS代码 #

/* 重置ul默认边距和内边距 */
nav ul {
  margin: 0;
  padding: 0;
}

nav ul li a {
  text-decoration: none;
  display: block; /* 让a标签占满li的点击区域 */
  color: #ecb9a7; /* 把内联样式移到CSS里统一管理 */
}

nav {
  line-height: 2;
  font-family: Garamond, Georgia, 'Times New Roman', Times, serif;
  width: 100%;
  background-color: #023436;
}

nav ul li {
  list-style-type: none;
  padding: 10px 0; /* 把hover时的上下padding移到默认状态，避免高度跳动 */
  text-align: center;
  width: 100%;
}

nav ul li:hover {
  background-color: white;
}

a#navigation {
  display: none;
}

HTML代码（移除内联样式） #

<header>
  <img src="media/header2.png" alt="Reading Record Header" id="headerlogo">
  <nav class="horizontal" id="navbar">
    <a href="#" id="navigation"><img src="media/naviconnobg.png"></a>
    <ul>
      <li><a href="finalprojecthome.html">Home</a></li>
      <li><a href="finalprojectlog.html">Log</a></li>
      <li><a href="finalprojectcontact.html">Contact</a></li>
      <li><a href="finalprojectwriting.html">Original Work</a></li>
      <li><a href="finalprojectreviews.html">Reviews</a></li>
      <li><a href="finalprojectphotoshoots.html">Photoshoots</a></li>
    </ul>
  </nav>
</header>

关键修改点：

• 给nav ul添加margin:0; padding:0;，清除浏览器默认的内边距，让列表项可以铺满导航栏宽度
• 将<a>标签的内联颜色样式移到CSS中，并设置display:block，确保点击区域覆盖整个列表项
• 把悬停时的上下内边距移到列表项的默认样式中，避免悬停时元素高度突然变化
• 悬停状态仅修改背景色，保持布局稳定

内容的提问来源于stack exchange，提问作者tjstudent