添加效果后导航栏元素折叠到下面的行

Question

我的导航栏看起来不错：link

<ul>
     <li><a class="active" href="#home">Home</a></li>
     <li><a href="#news">News</a></li>
     <li><a href="#contact">Contact</a></li>
     <li><a href="#about">About</a></li>
   </ul>

然而，在添加悬停效果后，元素似乎在右侧增加了一个不可见的额外像素，如下所示：link

<ul>
     <li><a class="active her-buzz-out" href=" #home">Home</a></li>
     <li><a class="her-buzz-out" href="#news">News</a></li>
     <li><a class="her-buzz-out" href="#contact">Contact</a></li>
     <li><a class="her-buzz-out" href="#about">About</a></li>
   </ul>

它们不再合适，任何将它们稍微向右移动的尝试都会导致最远的元素折叠到下面的行...使用绝对位置将不是一个选项，因为我需要它相对的。关于如何使元素合适的任何想法？

css在js fiddle页面中，不幸的是效果库在我的电脑上所以我只能描述错误...

Answer 1

请试一试！

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    width: 265px;
    height: 2.45em;
    margin: 5em;
    border-radius: 500px;
    background-color: #4da6ff;
}

li {
    float: left;
}

li a {
    position: relative;
    top: 10px;
    left: 1px;
    color: #4da6ff;
    text-decoration: none;
    padding: 8.5px 11px;
    margin-left:2px;
    width: 40%;
    border-radius: 500px;
    background-color: #ffffff;
  transition:all 400ms linear;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #e6e6e6;
    padding: 14px 20px;
}

 .active {
    background-color: #ffffff;
    color: #4da6ff;
}
.out {
    float: left;
    width: 100%;
    overflow: hidden;
    height: 100px;
}
.out {
    float: left;
    max-width: 70px;
    overflow: hidden;
    height: 100px;
    width: 100%;
}
li a:hover .out{
      max-width: 70px;
}

<ul>
     <li><div class="out"><a class="active her-buzz-out" href=" #home">Home</a></div></li>
     <li><div class="out"><a class="her-buzz-out" href="#news">News</a></div></li>
     <li><div class="out"><a class="her-buzz-out" href="#contact">Contact</a></div></li>
     <li><div class="out"><a class="her-buzz-out" href="#about">About</a></div></li>
   </ul>

添加效果后导航栏元素折叠到下面的行

Navbar elements collapse to the row below after effects are added

html

css

positioning

navbar

elements