Question

我正在使用css3和html制作网站5.我的主要问题是当我调整窗口大小时，我的导航栏正在下降。我会发布一些屏幕截图以使其更清晰。

.wrapper {
    width:auto;
    
    
}



body {
    margin:0 ;
    background-color:#E8EDE0	;
}



.header {
    display:block;
    background-color:#102E37;
    height:150px;
    border-bottom: 10px solid #2BBBD8;

 
}

.header img.logo {
    height:160px;
    widht:380px;
    padding: 0px;
    float:left;
    
    
    
}

.navMain{
    float:right;
    margin-top: 110px;
    margin-right: 234px;
    position: relative;
   
    
}
.navMain ul
{
margin:0px;
padding:0px;
     
}

.navMain ul li
{margin:0px;
padding:10px;
list-style:none;
display:inline;
    font-size:25px;
    
}

.navMain ul a 

{text-decoration: none;
 margon:0px;
padding:0px;
color: #FFFFFF;
font-family: candal;}


.navMain ul a:hover li
{text-decoration: underline;}

img.logo2
{height:400px;
width:600px;
margin-left:410px;
margin-top:40px; 
float:clear;}

<!--DOCTYpe html-->
<html>
    <head>
<title> Invisinet Wifi Solutions</title>
<link rel="stylesheet" href="main.css" type="text/css"/>
 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Candal" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    </head>
    
 <body>
 
     <div class="wrapper">
         <div class="header">
             <img class="logo" src="Images/invisinetLogo%20large%20clear.png"/>
             
         <div class="navMain">
                <ul>
                    <a href="#"><li>Home</li></a>
                     <a href="#"><li>Products</li></a>
                         <a href="#"><li>Contact Us</li></a>
                             <a href="#"><li>About Us</li></a>
                 
             </ul>
               
                 </div><!--end of navMain-->
         
             </div><!--end of header tag-->
         <img class="logo2" src="Images/food.jpg"/>
         
          
         
        
        
     </div><!--end of div wrapper>
    
    
    </body>
    
    </html>

Answer 1

这取决于您希望结果的样子。 CSS中navMain中的“float”属性会导致导航栏下拉。你可以这样做：例如：

.navMain {

  /* margin-top removed */
  margin-right: 234px;
  position: relative;
  margin-left: auto /*Same as float: right somehow */
  
}

Html和Css。导航栏位置

1 个答案: