导航栏（Navbar）内图片下移被遮挡问题排查求助

我仔细看了你的代码，发现几个导致Logo下移、部分被遮挡的问题，咱们一步步来修正：

问题1：HTML标签不规范 #

你用了自定义的<lileft>标签，但结束标签却是</li>，这会导致DOM结构混乱，浏览器无法正确解析元素关系。而且你的CSS选择器.lileft .li也和这个错误标签不匹配，样式根本没生效。

问题2：ul的上内边距导致整体下移 #

#nav ul设置了padding-top:13px，这个内边距会让整个ul容器往下偏移，而Logo是ul里的子元素，自然跟着下移，超出了#nav的40px高度，所以底部被截断了。

问题3：CSS选择器错误 #

你的CSS里写的.lileft .li是想选择class为lileft下的li元素，但实际上你需要的是直接选择class为lileft的li，所以应该改成.lileft。

修改后的代码 #

CSS部分：

body { background: #666; color: white; font-family: Helvetica; }
a { color: white; text-decoration: none; }
ul { padding: 0; margin: 0; /* 新增：移除默认外边距，避免额外间距 */ }
#container { background: #333; width: 400px; margin: 30px auto; overflow: hidden; }
#nav { background: #666; height: 40px; display: flex; align-items: center; /* 新增：用flex垂直居中元素，替代padding-top */ }
#nav ul { display: flex; width: 100%; /* 让ul占满导航栏宽度，方便左右分布 */ }
.lileft { list-style: none; margin-left: 10px; /* 给Logo加左边距，替代ul的padding-left */ }
.lileft img { display: block; height: 40px; width: auto; /* 明确图片高度，保持比例 */ }
#nav li:not(.lileft) { list-style: none; margin-left: auto; /* 让右侧导航项自动靠右 */ }
#nav li:not(.lileft) ~ li { padding-right: 20px; /* 给右侧导航项加右边距，除了第一个 */ }

HTML部分：

<div id="container">
  <div id="nav">
    <ul>
      <li class="lileft"><a href="#"><img src="https://i.ibb.co/WVxqWc7/crown.png" alt="crown" border="0"></a></li>
      <li><a href="oranges.html">Oranges</a></li>
      <li><a href="apples.html">Apples</a></li>
      <li><a href="grapes.html">Grapes</a></li>
      <li><a href="pears.html">Pears</a></li>
    </ul>
  </div>
</div>

关键修改说明： #

1. 修复标签结构：把自定义的<lileft>改为标准的<li class="lileft">，确保DOM结构合法。
2. 用Flex布局实现垂直居中：给#nav添加display: flex; align-items: center，让所有子元素自动垂直居中，彻底避免手动设置padding导致的偏移问题。
3. 调整导航项布局：通过margin-left: auto让右侧导航项自动靠右，比float布局更灵活易维护。
4. 明确图片尺寸：给Logo图片设置height:40px; width:auto，确保它和导航栏高度完全匹配，不会变形或溢出。

这样修改后，Logo就能正确显示在导航栏左侧，不会下移或被遮挡，同时右侧导航项也能保持垂直居中的状态~

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