悬停时移动其他 div 的字母间距答案

【问题标题】：Letter-Spacing moving other divs when hovering悬停时移动其他 div 的字母间距
【发布时间】：2021-09-18 21:52:40
【问题描述】：

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

<!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;
}

【问题讨论】：

更改字母间距会更改宽度。也许你应该 scale 代替？
您还可以为菜单项设置最小宽度，例如添加这个 CSS .navigation div { min-width: 100px;文本对齐：居中；填充：0 15px； }

标签： html css letter-spacing

【解决方案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;
    }

【讨论】：