Html 如何不让按钮移动css

在我的站点（）中，我使用bttn.css作为导航按钮。在按钮上，悬停时字母间距加倍。当右键悬停时，所有向左的按钮都会移动。如何在不移动其他按钮的情况下保持字母间距效果？下面是bttn.css代码

.bttn-default {
color: #fff;
}
.bttn-primary, .bttn, .bttn-md {
color: #fff;
}
.bttn, .bttn-md {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
}
.bttn-md {
font-size: 6px;
font-family: inherit;
padding: 1% 2%;
}
.bttn-stretch {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
font-family: inherit;
padding: 1px 2px;
overflow: hidden;
border-width: 0;
border-radius: 0;
background: transparent;
color: #fff;
letter-spacing: 0;
-webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-stretch:after, .bttn-stretch:before {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
content: '';
opacity: 0.65;
-webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.bttn-stretch:after {
top: 0;
}
.bttn-stretch:before {
bottom: 0;
}
.bttn-stretch:hover, .bttn-stretch:focus {
letter-spacing: 2px;
opacity: 0.9;
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-stretch:hover:after, .bttn-stretch:focus:after {
opacity: 1;
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.bttn-stretch:hover:before, .bttn-stretch:focus:before {
opacity: 1;
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.bttn-stretch.bttn-md {
font-size: 120%;
font-family: inherit;
padding: 1px 2px;
}
.bttn-stretch.bttn-default {
color: #fff;
}
.bttn-stretch.bttn-primary {
color: #FFF;
}

---

希望我正在尝试做的是可能的，我不确定它是否是。感谢您的帮助设置按钮的父div的宽度，并设置按钮的宽度，这将为您提供所需的功能，请注意，您必须调整这些值，因为我使用的值仅用于测试，另外，当屏幕缩小到手机大小时，也要确保它能正常工作。在这种情况下，您可能还需要编辑一些css

#second-nav{
  list-style: none;
  float: right;
  margin-top: 60px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  display: block;
  width: 480px;
}

#second-nav li{
  position: relative;
  display: inline-table;
  padding: 5px 20px;
  width: 70px;
}

---

您可以为按钮添加最小宽度，以便它们已经足够大，能够以扩展的字母间距显示文本：

.bttn拉伸{最小宽度：5.25em；}

使用em单位有助于确保无论字体大小如何，此功能仍能正常工作。我建议用分数ems来指定字母间距

我还将把悬停效应的范围扩大到非触摸设备。比如：

@media only screen and (min-width: 420px) { /* this media query targets screens at least 420px wide. The intent here is to only apply the :hover styles on devices with a mouse. Admittedly, 420 pixels is a bit of an arbitrary value here, you might find a better way to target the right devices for your use case. */
    .bttn-stretch { min-width: 5.25em; } /* this sets a minimum value for the width of the buttons so that they're already big enough to accommodate the letter-spaced text before the :hover styles are applied */
    .bttn-stretch:hover, .bttn-stretch:focus {
        letter-spacing: 0.104em; /* Currently you've got this set to 2px. I prefer to use em units because it keeps the spacing proportional to the size of your font. Because your font size is set at 19.2px, a value of 0.104em gets you very close to your current letter-spacing of 2px. You could just use 0.1em if you're not bothered by the 0.004em difference */
        /* the following lines were in your existing style sheet, I've just copied them over */
        opacity: 0.9;
        -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    }
}

---

谢谢你，这对我有用。您能详细解释一下最后一段代码的作用吗？我刚刚在代码中添加了更多注释，希望能有所帮助。@AssistedSuicide:我还注意到您有一个新的导航项，比其他导航项宽。您可以增加打开的最小宽度，使所有按钮变宽，即

.bttn stretch{min width:7.25em；}

，或者您可以向大按钮添加ID或类名，并仅为该按钮设置更宽的宽度。