导航栏选项偏移至一侧问题求助（HTML/CSS）

问题描述 #

用HTML和CSS开发的带悬停动画的导航栏，此前运行正常，现在所有菜单选项挤到一侧，但悬停动画仍能正常触发。未修改过代码，调整菜单项left属性无效。

问题演示 #

原始代码 #

HTML代码

<nav>
      <a href="#"> HOME</a>
      <a href="#"> ABOUT</a>
      <a href="#"> RECIPES</a>
      <a href="#"> GALLERY</a>
      <a href="#"> SUBSCRIBE</a>
    
      <div class="animation start-home"></div>
</nav>

CSS代码

nav {
    position: relative;
    width: 100%;
    height: 55px;
    background-color: white;
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1)
}

nav a{
    font-family: dunbar-tall, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    text-transform: uppercase;
    color: #d79da8;
    text-decoration: none;
    line-height: 50px;
    position: relative;
    z-index: 1;
    /* display: inline-block; */
    text-align: center;

}

nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    background: whitesmoke;
    border-radius:8px;
    transition: all .5s ease 0s;
}

nav a:nth-child(1){
    width:120px
}

nav .start-home, a:nth-child(1):hover~.animation{
    width: 120px;
    left: 0;

}   
nav a:nth-child(2){
    width: 120px;
}
nav a:nth-child(2):hover~.animation{
    width: 150px;
    left:102px;
}

nav a:nth-child(3){
    width: 120px;
}

nav a:nth-child(3):hover~.animation{
    width: 140px;
    left: 230px;
}

nav a:nth-child(4){
    width: 120px;
}

nav a:nth-child(4):hover~.animation{
    width: 140px;
    left: 350px;
}

nav a:nth-child(5){
    float:right;
    margin-right: 40px;
}

nav a:nth-child(5):hover~.animation{
    width: 150px;
    left: 1290px;
}

a:hover{
    color: #c18392;
}

问题原因 #

核心问题是nav a中的display: inline-block;被注释掉了。<a>标签默认是inline元素，inline元素无法设置宽度（设置width属性无效），导致所有菜单项无法占据指定的120px宽度，只能挤在一行左侧。

另外动画的left值用了固定像素（比如102px、230px），这种写法依赖固定布局，一旦元素宽度变化就会错位，不够灵活。

解决方案 #

1. 恢复nav a中的display: inline-block;，让菜单项可以设置宽度并横向排列；
2. 调整动画的left值，基于前一个菜单项的宽度计算，避免固定像素导致的错位；
3. 优化右侧菜单项的布局，避免float可能带来的布局问题。

修改后的CSS代码 #

nav {
    position: relative;
    width: 100%;
    height: 55px;
    background-color: white;
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
    /* 新增：让内部元素垂直居中 */
    display: flex;
    align-items: center;
}

nav a{
    font-family: dunbar-tall, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    text-transform: uppercase;
    color: #d79da8;
    text-decoration: none;
    line-height: 50px;
    position: relative;
    z-index: 1;
    /* 恢复inline-block，让宽度生效 */
    display: inline-block;
    text-align: center;
}

nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    background: whitesmoke;
    border-radius:8px;
    transition: all .5s ease 0s;
}

nav a:nth-child(1){
    width:120px;
}

nav .start-home, a:nth-child(1):hover~.animation{
    width: 120px;
    left: 0;
}   
nav a:nth-child(2){
    width: 120px;
}
nav a:nth-child(2):hover~.animation{
    width: 120px;
    left:120px; /* 对应第一个菜单项的宽度 */
}

nav a:nth-child(3){
    width: 120px;
}

nav a:nth-child(3):hover~.animation{
    width: 120px;
    left: 240px; /* 120+120 */
}

nav a:nth-child(4){
    width: 120px;
}

nav a:nth-child(4):hover~.animation{
    width: 120px;
    left: 360px; /* 120*3 */
}

/* 调整右侧菜单项布局，用margin-left:auto替代float */
nav a:nth-child(5){
    margin-left: auto;
    margin-right: 40px;
    width: 150px;
}

nav a:nth-child(5):hover~.animation{
    width: 150px;
    /* 动态计算右侧位置，避免固定像素 */
    right: 0;
    left: auto;
}

a:hover{
    color: #c18392;
}

说明 #

• 恢复display: inline-block;后，菜单项的宽度设置生效，会按指定宽度横向排列；
• 用margin-left: auto替代float:right，让右侧菜单项自动靠齐右侧，布局更稳定；
• 动画的left值改为基于前一个元素宽度的累加，右侧菜单项用right:0替代固定left值，适配不同屏幕宽度。

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