html - 当我将鼠标悬停在它们上时，我的 li 元素向下移动

Question

nav li每当我将鼠标悬停在它们上方时，我的主要元素都会向下移动。我认为这是由于使用保证金造成的，但在删除保证金使用后我仍然收到此问题，我不确定它是什么。我知道这很可能很简单。任何帮助，将不胜感激。谢谢你。

/*primary nav bar*/
.primarynav {
    background-color: #ffffff;
    border: solid 1px #f76f4d;
    position: relative;
    height: 50px;
    width: 1430px;
    top: 10px;
}
    
.primarynav ul {
    position: relative;
    padding-bottom: 10px;
    text-decoration: none;
    padding-left: 100px;
}
    
.primarynav a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fd886b;
    width: 115px;
    height: 50px;
    padding: 17px 0px 0px 0px;
    font-weight: bold;
    border: 1px solid orangered;
}
    
/*primary navigation effects*/
/*.primarynav a:hover::before {
    background-color: #fd886b;
     
}
*/
    
.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    border-radius: 3px;
}
  
.mainnavigation li {
    display: inline-block;
    bottom: 51px;
    padding-top: 50px;
    text-align: center;
    position: relative;
    font-size: 15px;
    left: 200px;
}

<header class="primarynav">
  <div class="primaryContainer"> <!-- Main top of page navigation -->
     <nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
       <ul class= "mainnavigation">
         <li><a href="Index.php">Home</a></li>  
         <li><a href="#">Items</a></li> 
         <li><a href="#">Categories</a></li>
         <li><a href="#">Favourites</a></li>
         <li><a href="#">Deals</a></li>
         <li><a href="#">List An Item</a></li>
      </ul>
    </nav>
  </div>
</header>

标签： htmlcss

Answer 1

添加边距：-2px；解决了这个问题，这是由于边框：2px 橙红色。

.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    margin: -2px;
    border-radius: 3px;
}

/*primary nav bar*/
.primarynav {
    background-color: #ffffff;
    border: solid 1px #f76f4d;
    position: relative;
    height: 50px;
    width: 1430px;
    top: 10px;
}

.primarynav ul {
    position: relative;
    padding-bottom: 10px;
    text-decoration: none;
    padding-left: 100px;
}

.primarynav a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fd886b;
    width: 115px;
    height: 50px;
    padding: 17px 0px 0px 0px;
    font-weight: bold;
    border: 1px solid orangered;
}

/*primary navigation effects*/
/*.primarynav a:hover::before {
    background-color: #fd886b;
    
}
*/

.primarynav a:hover {
    color: white;
    background-color: #fd886b;
    border: 2px solid orangered;
    margin: -2px;
    border-radius: 3px;
}

.mainnavigation li {
    display: inline-block;
    bottom: 51px;
    padding-top: 50px;
    text-align: center;
    position: relative;
    font-size: 15px;
    left: 200px;
}

<header class="primarynav">
      <div class="primaryContainer"> <!-- Main top of page navigation -->
        <nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
          <ul class= "mainnavigation">
            <li><a href="Index.php">Home</a></li>  
            <li><a href="#">Items</a></li> 
            <li><a href="#">Categories</a></li>
            <li><a href="#">Favourites</a></li>
            <li><a href="#">Deals</a></li>
            <li><a href="#">List An Item</a></li>
          </ul>
        </nav>
      </div>
   </header>