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

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

1 个答案: