Question

我正在图像顶部添加导航栏。导航栏为白色背景，左侧为徽标图片，右侧为其他内容。但看起来导航栏没有采用100％的宽度。如果我增加宽度，它不会起作用。我添加了所有引导链接以使其具有响应性。

.main{
      position: relative;
        
    }
    .topNav{
        position: absolute;
       width:100%;
       
    }
    
    li{
        float: left;
        padding: 20px;
        background-color: aliceblue;
        height: 100px;
      list-style-type: none;
    }
    .topImg{
        position: absolute;
        top:100px;
    }
    .logo{
        float: left;
    }   
}

<body>
<div class="container">
    <div class="row">
        
        <div class="col-sm-12">
            <div class="main text-center">
                 <div class="topNav">
                    <ul>
                         <li class="logo"><img src="https://i2.wp.com/riverviewramslacrosse.com/wp-content/uploads/img-header-logo.png?fit=204%2C202"></li>
                         <li> Home</li>
                         <li>About</li>
                         <li> Contact</li>
                         <li> Apply</li>   
                  </ul>
                </div>
                
                <div class="topImg text-center">
                    <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" class="img-responsive img-center image-fluid" alt="officeImg">
                </div>
           
            </div>
       
    </div>
    </div>
    </div>``    
    
</body>

如何在带有白色背景的图像顶部添加导航栏

0 个答案: