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

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

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

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;
}

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

How to stop Navigation bar list from changing position?

html

css

navigation