Letter-Spacing 在悬停时移动其他 div

Question

我正在建设的网站上有一个导航栏，当您将鼠标悬停在一个词上时，字母间距会增加。我的问题是它会自动移动左侧和右侧的单词，即使理论上有足够的 space 来实现字母间距而不会移动任何其他内容，有人知道解决这个问题的方法吗？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> 
<title>Test</title>
</head>

<body style=background-color:black>

<h1 class="heading">Test</h1>

<div class="navigation">
    <div id="Work">
        <a class="nav_subh" href="work.html">
         Work
        </a>
    </div> 
    <div id="About">
        <a class="nav_subh" href="about.html">
        About
        </a>
    </div> 
    <div id="Contact">
        <a class="current_subh" href="contact.html">
        Contact
        </a>
    </div> 
</div>

</body>

</html>

和 css:

.heading {
    color: white;
    text-align: center;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 3px;
    background: black;
}

.nav_subh {
    color: white;
    text-align: center;
    margin: 1rem;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    transition: .3s ease-in-out;
}

.current_subh {
    color: white;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 5px;
    transition: .3s ease-in-out;
}

#Work:hover .nav_subh {
    letter-spacing: 5px;
}

#About:hover .nav_subh {
    letter-spacing: 5px;
}

#Contact:hover .nav_subh {
    letter-spacing: 5px;
}

#Work {
    margin: 0 1rem 0 0 ;
}

#About {
    margin: 0 1rem 0 1rem ;
}

#Contact {
    margin: 0 0 0 1rem ;
}

.current_subh {
    color: white;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 6px;
}

.navigation {
    width: 30rem;
    height: 1rem;
    display:flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

Answer 1

您的元素宽度设置为最小值，并且由于边距和其他布局属性，它会移动其他元素，您应该给您的 .nav__subh 一些静态宽度，并且只有 block position 才有可能所以尝试将其添加到您的 css

 .nav_subh {
        color: white;
        text-align: center;
        margin: 1rem;
        overflow: hidden;
        font-family: 'Roboto', sans-serif;
        letter-spacing: 2px;
        transition: .3s ease-in-out;
        width: 5rem;
        display: block;
    }

Letter-Spacing 在悬停时移动其他 div

Letter-Spacing moving other divs when hovering

html

css

letter-spacing