HTML/CSS导航栏中登录按钮位置偏低问题求助

嘿，我来帮你排查这个问题！你遇到的登录按钮偏低的情况，主要是两个小细节没处理好：

问题根源 #

1. 不必要的display: inline-block设置：你给id为is的<li>加了display: inline-block，但其他导航项的<li>因为设置了float: left已经自动变成block级元素了。inline-block元素默认的vertical-align: baseline对齐方式，会让它和block级的<li>不在同一水平高度，视觉上就显得偏低。
2. 双层内边距叠加：你直接给<li id="is">设置了padding，但它内部的<a>标签还继承了li a的padding样式，这就导致登录项的内边距是双倍的，进一步让元素位置出现偏移。

修复方案 #

我们只需要调整CSS代码，统一导航项的结构样式即可：

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

body{ 
  background-color: black; 
} 

ul{ 
  list-style-type: none; 
  margin: 0;
  padding: 0;
  background-color: black; 
  overflow: hidden; 
} 

li{ 
  float: left; 
} 

li a { 
  display: block; 
  color: white; 
  text-align: center; 
  padding: 3mm 3mm; 
  text-decoration: none; 
  font-family: 'Montserrat', sans-serif; 
} 

/* 只给登录项的li设置右浮动，内部a复用通用样式 */
#is { 
  float: right; 
} 

li a:hover { 
  border-bottom: 0.3mm solid red ; 
}

为什么这样改？ #

• 移除了#is中多余的display: inline-block和重复的样式，让它和其他<li>保持一致的block级特性，对齐方式自然统一。
• 登录项内部的<a>直接复用li a的样式，确保所有导航按钮的内边距、字体、高度完全一致，不会出现偏移。
• 只保留float: right来实现靠右的需求，逻辑更清晰。

如果之后想给登录按钮加特殊样式（比如不同背景色），再单独给#is a写样式就行，比如：

#is a {
  background-color: #333;
}

这样修改后，你的导航栏所有按钮就能完美对齐啦！

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