如何避免导航栏链接hover放大字体时发生偏移？

核心问题分析 #

你当前遇到的链接偏移问题，本质是直接修改font-size会改变元素的实际宽度，在flex布局下，容器会重新分配空间，导致相邻元素被挤压移位。你用margin设置间距本身没问题，但结合元素尺寸变化就会触发布局重排；而float布局早已被flex替代，完全没必要改用，flex能更轻松实现对齐和间距控制。

解决步骤 #

1. 用transform: scale()实现hover放大不偏移 #

直接修改font-size会改变元素盒模型尺寸，改用transform: scale()是最优解——它是在视觉层面缩放元素，不会改变元素占据的原始空间，自然不会影响周围元素：

.navigation-links li a:hover {
    transform: scale(1.2); /* 放大1.2倍，对应原25px→30px的比例 */
    transition: transform 0.2s ease; /* 加上过渡动画更流畅 */
}

同时要给a标签设置display: inline-block，确保transform生效：

.navigation-links li a {
    font-size: 25px;
    color: white;
    text-decoration: none;
    text-align: center;
    display: inline-block; /* 新增 */
}

2. 实现链接部分居左、部分居右 #

在你的flex布局基础上，给需要居右的链接分组，然后通过margin-left: auto实现自动推到右侧：

• 修改HTML，把登录/注册链接单独放在一个<ul>里：

<nav class="navigation-bar">
    <div class="logo">
        <img src="rocket-g9cbacc798_1280.png" alt="Company Logo"> 
    </div>
    <ul class="navigation-links left-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
    </ul>
    <ul class="navigation-links right-links">
        <li><a class="special1"href="#">JOIN NOW</a></li>
        <li><a class="special2" href="#">LOG IN</a></li>
    </ul>
</nav>

• 新增CSS控制右侧链接：

.right-links {
    margin-left: auto; /* 自动推到右侧 */
}

3. 更可控的自定义间距 #

避免给每个元素单独设置margin-left，改用flex的gap属性给<ul>设置统一间距，特殊元素再单独调整：

.navigation-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 90px; /* 替代li的margin-left，统一间距 */
}
/* 给特殊链接调整间距 */
.right-links li:first-child {
    margin-left: 60px;
}
.right-links li:last-child {
    margin-left: 2px;
}

同时移除原.navigation-links li的margin-left:90px，避免冲突。

修改后的完整代码 #

CSS #

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7;
    margin: 0;
}

header {
    background-color: black;
}

.navigation-bar {
    width: 100%;
    height: 76px;
    display: flex;
    padding: 10px;
    align-items: center;
}

.logo img {
    position: relative;
    left: 20%;
    height: 80px;
    width: auto;
}

.navigation-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 90px;
}

.navigation-links li a {
    font-size: 25px;
    color: white;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    transition: transform 0.2s ease;
}

.navigation-links li a:hover {
    transform: scale(1.2);
}

/* join now class    */
.navigation-links li a.special1 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border: 2px solid rgb(226, 19, 54);
    border-radius: 50px;
    padding: 15px 10px;
    background-color: rgb(226, 19, 54);
}

/* login class */
.navigation-links li a.special2 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border: 2px solid white;
    border-radius: 50px;
    padding: 15px 40px;
    background-color: black;
}

.right-links {
    margin-left: auto;
}

.right-links li:first-child {
    margin-left: 60px;
}

.right-links li:last-child {
    margin-left: 2px;
}

/*resposive nature*/
@media screen and (max-width: 768px) {
    .navigation-links {
        display: none;
    }
}

HTML #

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

    <head>
      <title>Navigation Bar Example</title>
      <link rel="stylesheet" type="text/css" href="styles2.css">
    </head>
    <body>
        <header>
            <div>
                <nav class="navigation-bar">
                    <div class="logo">
                        <img src="rocket-g9cbacc798_1280.png" alt="Company Logo"> 
                    </div>
                    <ul class="navigation-links left-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                    <ul class="navigation-links right-links">
                        <li><a class="special1"href="#">JOIN NOW</a></li>
                        <li><a class="special2" href="#">LOG IN</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- Rest of the content -->
    </body>
</html>

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