如何阻止导航栏列表更改位置

Question

我创建了一个导航栏，在悬停时，我使字体变大了。但是当我悬停时，其他菜单项似乎从其位置移动，我如何将它们锁定在它们的位置。另外，刚刚开始html和css，如果有人能帮助我，谢谢:).html：

<div class="header">
    <div class="container">
        <div class="header-left">
            <a href="index.php">
            <img src="images/hawa.png" style="width:200px;height:60px;">    
            </a></div>
        <div class="header-right">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>   
        </div>  
    </div>  
    <div class="clear"></div>
</div>

.CSS：

.header{
    background-color: #003399;
    width: 100%;
    height: 83px;
    position: fixed;
       }
     .container{
width:1200px;
background-color:#003399;
margin:auto;
height:83px;
  } 
.header-left{
float:left;
padding: 10px;
}
.header-right{
float:right;
width:900px;
height:83px;
} 
.header-right ul{
margin: 0;
padding: 0;
} 
.header-right li{
list-style: none;

}
.header-right li a{
text-decoration: none;
float:left;
display: block;
padding: 35px;
color:#FFFFFF;
text-transform: uppercase;
font-size: 18px;
font-family: sans-serif;
}
.header-right li a:hover{
font-size: 20px;
display: block;
}

Answer 1

可以在列表项上添加类并设置这些项的宽度。例如：

.html：

<ul>
    <li class="nav-cells"><a href="#">Home</a></li>
    <li class="nav-cells"><a href="#">About</a></li>
    <li class="nav-cells"><a href="#">Services</a></li>
    <li class="nav-cells"><a href="#">Contact Us</a></li>
    <li class="nav-cells"><a href="#">Sign Up</a></li>
</ul>

.css：

.nav-cells {
  width: 100px;
  display: inline;
}