如何沒有按鈕移位CSS

Question

在我的網站（ antetech.org ）上，我將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;
}

希望我正在嘗試做的事情是可能的，但我不確定是否可以。 感謝您的幫助<3

Answer 1

您可以為按鈕添加一個最小寬度，以便它們已經足夠大以顯示帶有擴展字母間距的文本： .bttn-stretch { min-width: 5.25em; } .bttn-stretch { min-width: 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);
    }
}

Answer 2

設置按鈕的父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;
}